boostrap中文件上传使用组件fileinput：首先引入样式文件，使用cdn地址
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="网页链接" rel="stylesheet">
引入js文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="网页链接>
在form表单中
<div class="form-group">
<label for="bank">xxxx</label>
<input id="certificates" name="certificates" type="file" multiple>
<input type="hidden" name="row[certificates]" id="certificatesImg">
</div>
在js文件中写法
<script type="text/javascript">
$(function () {
$("#certificates").fileinput({
uploadUrl: "xxx", //文件上传接口地址
maxFileCount: 1, //文件上传数量
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
initialPreview: [
"<img src ='"+xxx+ "'class ='file-preview-image' height='250px' width='160px' alt ='x' title ='xxxxx'>" //初始化控件图片，编辑时给控件赋值
],
enctype: 'multipart/form-data'
}).on("fileuploaded", function(e, data, previewiId, index) {
$("#certificatesImg").val(data.response.data.fileName); .//上传成功返回
console.log(data);
});
})
后端使用php接收上传处理
/**
*
* 上传图片
*/
public function xxx(){
$file = request()->file('certificates');
$domain = Config::get('domain');
$info = $file->move(ROOT_PATH . 'public' . DS . '/uploads/certificates', true, true);
if (empty($info->getError())) {
$this->success('上传成功！', null, ['fileName' => $domain.'/uploads/certificates/' . $info->getSaveName()]);
} else {
$this->error('上传失败！');
}
}
转自：https://www.toutiao.com/a1664824636596237