上傳外掛如何使用，我這裡就不多說了，網上大把教程。今天我要講的是如何限制上傳一個檔案，以及當檔案選擇錯誤是，再重新選擇檔案導致的問題。

預設給上傳外掛支援多檔案上傳，但是我們有很多需求是之上傳單個檔案，下面就來一起學習學習吧！

外掛html

<div class="form-group">
    <label for="img" class="control-label col-sm-2"><span class="require_red">*&nbsp;&nbsp;</span>獎品圖片：</label>
     <div id="uploader" class="wu-example col-sm-10 col-md-4">
     <input type="hidden" name="img" id="img" value="{{$resData['award_pic_normal']}}">
     <!--預覽-->
     <div id="preview" class="uploader-list" style="margin-bottom: 3px"><img src="{{ $resData['award_pic_normal']}}" alt=""></div>
     <div id="picker" class="col-sm-5 col-md-3">選擇檔案</div>
     <div id="ctlBtn" class="btn btn-primary" style="height: 40px">開始上傳</div>
       　　<span class="require_red font-size">圖片尺寸255x255，透明背景</span>
     </div>
</div>
 

外掛初始化：

 var uploader = WebUploader.create({
            auto:false,

            // swf檔案路徑
            swf: "{{ asset("plugins") }}/webuploader-0.1.5/Uploader.swf) ",

            // 檔案接收服務端。
            server: "{{url('/ad/upload/img')}}",

            // 選擇檔案的按鈕。可選。
            // 內部根據當前執行是建立，可能是input元素，也可能是flash.
            pick: {
                id:'#picker',
                multiple:false  //限制多檔案上傳
            },
            accept:{
                title:'Images',
                extentions: "png,jpeg,jpg",
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            formData:{
                '_token':'{{csrf_token()}}'//laravel框架必不可少的
            },
            fileVal:"img",
            // 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
            resize: false,
            fileNumLimit: 1
        });
 

只需把multiple的值設為false，且fileNumLimit檔案個數設為1，但是，這裡還沒完，如果運營在選擇圖片時選擇錯誤，再點選選擇圖片時，圖片不會替換掉，只能重新整理再選擇，顯然這樣體驗是很不好的（會被人在心裡默默罵死）。

所以還得加上下面關鍵一步：

 // 當有檔案新增進來的時候
        uploader.on( 'fileQueued', function( file ) {
            // 建立縮圖
            // 如果為非圖片檔案，可以不用呼叫此方法。
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    layer.msg('不能預覽');
                    return;
                }
                $("#preview").html("<img src='"+src+"'>");
            }, 100, 100 );
            //刪除錯誤的第一個檔案
            $("#picker").on("click",function () {
                uploader.removeFile(file);
            })
        });
        //點選上傳
        $("#ctlBtn").on("click",function () {
            uploader.upload();
        })
        // 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
        uploader.on( 'uploadSuccess', function( file , msg ) {
            $( '#'+file.id ).addClass('upload-state-done');
            // 把伺服器返回的圖片地址儲存到隱藏域
            if(msg.status ="SUCCESS"){
                layer.msg('上傳成功',{icon:1,time:2000});
                $('input[name=img]').val( msg.fileUrl );
            }else{
                layer.msg("上傳失敗",{icon:2,time:3000});
            }

        });
        // 檔案上傳失敗，顯示上傳出錯。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重複建立
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上傳失敗');
        });
 

$("#picker").on("click",function () {
    uploader.removeFile(file);
})  

該程式碼的含義是：給選擇按鈕新增點選事件，目的是刪除佇列中已有的檔案，這樣就可以替換原來錯誤的檔案了，親試有效！！