WebUploader的使用

這篇文章主要介紹了關於WebUploader的使用，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

var uploader = WebUploader.Uploader({         //幾個常用的參數：swf,pick,formData,runtimeOrder      //所有參數列表      swf: 'path_of_swf/Uploader.swf',      dnd: '#dndArea', // [預設值：undefined] 指定Drag And Drop拖拽的容器，如果不指定，則不啟動。      disableGlobalDnd: true,, // [預設值：false] 是否禁掉整個頁面的拖拽功能，如果不禁用，圖片拖進來的時候會預設被瀏覽器開啟      paste: '#uploader', // [預設值：undefined] 指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設定為document.body.      pick:'#filePicker',//也可以用下面的方式詳細配置      // {Selector, Object}  [預設值：undefined] 指定選擇檔案的按鈕容器，不指定則不建立按鈕。      pick: {          id: '#filePicker',//Seletor|dom 指定選擇檔案的按鈕容器，不指定則不建立按鈕。注意 這裡雖然寫的是 id, 但是不是只支援 id, 還支援 class, 或者 dom-節點。          label: '點擊選擇圖片',//請採用 innerHTML 代替          innerHTML: "點擊選擇圖片",// 指定按鈕文字。不指定時優先從指定的容器中看是否內建文字。          multiple:true //是否開起同時選擇多個檔案能力。      },      //限制上傳的檔案類型      accept: {          title: 'Images',// {String} 文字描述          extensions: 'gif,jpg,jpeg,bmp,png,rar',// {String} 允許的檔案尾碼，不帶點，多個用逗號分割。          mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,.rar'// 多個用逗號分割。      },      // 設定縮圖。      thumb: {          width: 110,          height: 110,          // 圖片品質，只有type為`image/jpeg`的時候才有效。          quality: 70,          // 是否允許放大，如果想要產生小圖的時候不失真，此選項應該設定為false.          allowMagnify: true,          // 是否允許裁剪。是否採用裁剪模式。如果採用這樣可以避免空白內容。          crop: true,          // 為空白的話則保留原有圖片格式。          // 否則強制轉換成指定的類型。          type: 'image/jpeg'      },      // 配置壓縮的圖片的選項。如果此選項為false, 則圖片在上傳前不進行壓縮。      compress: {          width: 1600,          height: 1600,          // 圖片品質，只有type為`image/jpeg`的時候才有效。          quality: 90,          // 是否允許放大，如果想要產生小圖的時候不失真，此選項應該設定為false.          allowMagnify: false,          // 是否允許裁剪。          crop: false,          // 是否保留頭部meta資訊。          preserveHeaders: true,          // 如果發現壓縮後檔案大小比原來還大，則使用原來圖片          // 此屬性可能會影響圖片自動糾正功能          noCompressIfLarger: false,          // 單位位元組，如果圖片大小小於此值，不會採用壓縮。          compressSize: 0      },       auto: true, // [預設值：false] 設定為 true 後，不需要手動調用上傳，有檔案選擇即開始上傳。      runtimeOrder: 'flash', // [預設值：html5,flash] 指定運行時啟動順序。預設會想嘗試 html5 是否支援，如果支援則使用 html5, 否則則使用 flash.可以將此值設定成 flash，來強制使用 flash 運行時。      prepareNextFile:false, // [預設值：false] 是否允許在檔案傳輸時提前把下一個檔案準備好。 對於一個檔案的準備工作比較耗時，比片壓縮，md5序列化。 如果能提前在當前檔案傳輸期處理，可以節省總體耗時。      chunked:false, // [預設值：false] 是否要分區處理大檔案上傳。      chunkSize: 512 * 1024,// [預設值：5242880] 如果要分區，分多大一片？ 預設大小為5M.      chunkRetry:2, // [預設值：2] 如果某個分區由於網路問題出錯，允許自動重傳多少次？      threads:3, // [預設值：3] 上傳並發數。允許同時最大上傳進程數。      formData: {"test":"123123","shui":"ping"}, // [預設值：{}] 檔案上傳請求的參數表，每次發送都會發送此對象中的參數。      fileVal:"pictures", // [預設值：'file'] 設定檔案上傳域的name。      method :"POST", // [預設值：'POST'] 檔案上傳方式，POST或者GET。      sendAsBinary :false, // [預設值：false] 是否已二進位的流的方式傳送檔案，這樣整個上傳內容php://input都為檔案內容， 其他參數在$_GET數組中。      fileNumLimit :10, // [預設值：undefined] 驗證檔案總數量, 超出則不允許排入佇列。      fileSizeLimit : 200 * 1024 * 1024,    // 200 M  [預設值：undefined] 驗證檔案總大小是否超出限制, 超出則不允許排入佇列。      fileSingleSizeLimit: 50 * 1024 * 1024,    // 50 M [預設值：undefined] 驗證單個檔案大小是否超出限制, 超出則不允許排入佇列。      duplicate :true, // [預設值：undefined] 去重， 根據檔案名稱字、檔案大小和最後修改時間來產生hash Key.      disableWidgets: {String, Array}, // [預設值：undefined] 預設所有 Uploader.register 了的 widget 都會被載入，如果禁用某一部分，請通過此 option 指定黑名單。  });

後端php，用的laravel架構，很方便：

public function uploadFile(Request $request){    set_time_limit(100);    // dd(request()->all());    $type = request('type', 0);        if ($type == 1) {            $rules = [            'document' => 'sometimes|required|file|mimes:word,ppt,pdf,jpg,png,jpeg|max:10240',        ];    } else {                    $rules = [            'file' => 'required|image|max:2048',        ];    }        $validator = Validator::make($request->all(), $rules);        if ($validator->fails())     {              $error_message = $validator->errors()->all();              return $type == 1 ? false : $this->outPutJson('', 501, $error_message);    }        $file = $type == 1 ? $request->file('document') : $request->file('file');            $save_path = 'courseware';            $mime_type = $file->getClientOriginalExtension();    //儲存檔案    $save_name = date('Ymd_H_i_s_') . uniqid() . '.' . $mime_type;        $path = $file->storeAs($save_path, $save_name, 'ftp');        return $type == 1 ? $path : $this->outPutJson($path);}