将你放到public下的webuploader文件夹中的examples/imageupload/index.html复制到在对应需要文件上传功能的视图文件夹下面
第一步 先创建表单
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋图片:</label>
<div class="formControls col-xs-2 col-sm-2">
<div id="picker">房屋图片</div>
</div>
<div class="formControls col-xs-6 col-sm-7">
<!-- 表单提交时,上传图片地址,以#隔开 -->
<input type="hidden" name="fang_pic" id="fang_pic"/>
<!-- 显示上传成功后的图片容器 -->
<div id="imglist"></div>
</div>
</div>
第二步 引入地址
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
第三步 写js代码
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传
auto: true,
// swf文件路径
swf: '/webuploader/Uploader.swf',
// 文件接收服务端 上传PHP的代码
server: '{{ url('admin/fang_owner/upfile') }}',
// 文件上传是携带参数
formData: {
_token: '{{csrf_token()}}'
},
// 文件上传是的表单名称
fileVal: 'file',
// 选择文件的按钮
pick: {
id: '#picker',
// 是否开启选择多个文件的能力
multiple: true
},
// 压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: true,
duplicate: true
});
// 上传成功时的回调方法
uploader.on('uploadSuccess', function (file, ret) {
// 解决表单提交时,图片以#隔开解决
let val = $('#fang_pic').val();
let tmp = val + '#' + ret.url;
$('#fang_pic').val(tmp);
// 图片显示
let imglist = $('#imglist');
// 注:一定要用追加还是不html覆盖
let html = `
<div style="position: relative;;width:100px;">
<img src="${ret.url}" style="width:100px;" />
<strong onclick="delpic(this,'${ret.url}')" style="position: absolute;right: 2px;top: 2px;color: white;font-size: 20px;">X<strong>
</div>
`;
imglist.append(html);
});
后台接收数据
//文件上传
public function upfile(Request $request){
//默认图标
$pic=config('up.pic');
if($request->hasFile('file')){
//上传 配置的节点名称
$ret=$request->file('file')->store('','fangattr');
$pic = '/uploads/fangattr/' . $ret;
}
return ['status' => 0, 'url' => $pic];
}