laravel 实现WebUploader 异步上传

将你放到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];
    }