工作中用到的一個前端的插件webupload，由于頁面中有不確定數量的上傳圖片的按鈕。剛開始我試著把這個插件封裝，結果……欲哭無淚呀，上傳不了，整個頁面的上傳按鈕都不好使。最后在文檔中，發現了addButton這個參數，終于解決了問題。不說了，直接上代碼

var uploader = WebUploader.create({// 選完文件后，是否自動上傳。auto: true,// swf文件路徑swf: BASE_URL + 'assets/admin-tools/webuploader_fex/dist/Uploader.swf',// 文件接收服務端。server: 'url',duplicate : true,// 選擇文件的按鈕。可選。// 內部根據當前運行是創建，可能是input元素，也可能是flash.pick: '#filePicker',fileVal: 'image', //服務端File對應的名稱。// 只允許選擇圖片文件。accept: {title: 'Image',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}});// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。uploader.on( 'uploadSuccess', function( file, obj ) {//如果你上傳成功需要對某一個文本框賦值 以$("#rt_"+file.source.ruid)為對象找到需要賦值的文本框$("#rt_"+file.source.ruid).parent().next().val(obj.name);成功執行的代碼});// 文件上傳失敗，顯示上傳出錯。uploader.on( 'uploadError', function( file ) {//失敗執行的代碼});//計算出需要多少個實例化的按鈕var boxes_len = $(".class").length;//循環實例化頁面的上傳按鈕for(var i=1; i<=boxes_len ;i++){uploader.addButton({id : "#filePicker"+(i),//必須唯一innerHTML : '選擇圖片',});}

總結

以上是生活随笔為你收集整理的webupload 多个实例化上传按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。