使用jquery-fileupload上传插件

fileupload    上传    laravel    jquery   

引用插件

css框架使用的是bootstrap
jquery一定要引用的

    <link rel="stylesheet" href="/css/jqupload/jquery.fileupload.css">
    <link rel="stylesheet" href="/css/jqupload/jquery.fileupload-ui.css">
    <script src="/js/jqupload/jquery.ui.widget.js"></script>
    <script src="/js/jqupload/jquery.fileupload.js"></script>

html代码

 <!---按钮组-->
<div class="form-group ">
        <label for="thumb" class="col-sm-2 control-label">缩略图</label>
        <div class="col-sm-2 fileupload-buttonbar">
              <span class="btn btn-success fileinput-button">
                   <i class="glyphicon glyphicon-plus"></i>
                   <span>Add files...</span>
                   <input type="file" name="files" multiple id="fileupload">
                   <input type="hidden" name="thumb" id="thumb" />
              </span>
       </div>
      <div class="col-sm-6 fileupload-buttonbar">

            <button type="button" id="startupload" class="btn btn-primary start">
                         <i class="glyphicon glyphicon-upload"></i>
                         <span>Start upload</span>
            </button>
             <button type="button" class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel upload</span>
             </button>
              <button type="button" class="btn btn-danger delete">
                          <i class="glyphicon glyphicon-trash"></i>
                         <span>Delete</span>
               </button>
         </div>
</div>
<!---进度条-->
<div class="form-group">
        <label for="thumb" class="col-sm-2 control-label"></label>
        <div class="progress col-sm-7 padding0 margin-left15">
               <div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:0%">
               </div>
         </div>
 </div>

js代码

 <script>
        $(function () {
                    $('#fileupload').fileupload({
                        dataType: 'json',
                        progressall: function (e, data) {
                            var progress = parseInt(data.loaded / data.total * 100, 10);
                            $('#progressbar').css(
                                    'width',
                                    progress + '%'
                            );
                        },
                        add: function (e, data) {
                            data.context = $('#startupload').click(function () {
                                data.submit();
                            });
                        },
                        submit: function (e, data) {

                        },
                autoUpload:false,

                formData:{_token:"{{csrf_token()}}"},
                url:'/upload/upload-img',
                done: function (e, data) {
                    console.log(data);
                    if(data.result.status == 'success')
                    {
                        $('#thumb').val(data.result.path);
                        alert('上传成功!') ;
                    }else{
                        alert('上传失败!') ;
                    }

                    /*
                    $.each(data.result.files, function (index, file) {
                        $('<p/>').text(file.name).appendTo(document.body);
                    });
                    */
                }
            });
        });
    </script>

php处理代码 (laravel5)

    public function uploadImg(Request $request)
    {
        if (!$request->hasFile('files'))
        {
            return response()->json(['path' => '', 'status' => 'error']);
        }
        $file = $request->file('files');
        $filePath = 'upload/'.str_random(16).'.'.$file->getClientOriginalExtension();
        Storage::put($filePath, file_get_contents($file->getRealPath()));
        return response()->json(['path' => $filePath, 'status' => 'success']);
    }

具体其他参数
参考链接地址:jQuery File Upload

关于

技术的领导者畅饮无限
做最真实的自己,在其位谋其职.

ElseWhere