
插件描述:該插件是基于百度webuploader的一個插件,支援IE8,可以上傳任何檔案,上傳圖檔可以預覽,異步上傳,使用非常友善
更新時間:2018/3/24 下午9:21:47
更新說明: 如在IE8/9浏覽器中不能使用,請更新flash player,因為webuploader在低版本IE是使用flash進行檔案選擇及上傳的
1、新增了自定義請求header、自定義預覽圖、反複上傳功能 2、優化了之前不夠好的代碼 3、新增了許多使用案例。(具體請參見:https://941477276.github.io/UploadPreview/doc/index.html)
更新時間:2017/12/18 上午9:19:27
更新說明:修複IE8下的一些bug
更新時間:2017/12/4 上午11:45:30
更新說明:
1、使用了最新版本的webuploader
2、更改了一些功能的内部實作方式
3、增加了拖拽上傳功能
更新時間:2017/9/30 下午11:14:43
更新說明:
1、修複IE8點選上傳圖示删除不了的bug及檔案數量統計不正确的bug
2、優化預覽圖寬度計算方式,當自定義預覽框時,預覽圖大小随着.imgWrap元素的寬度而變化。
更新時間:2017/8/28 下午5:32:12
更新說明:
1)、使用面向對象程式設計思想進行封裝,一個頁面中可以有n個執行個體
2)、支援AMD、CMD
3)、提供了豐富的參數配置及方法,可靈活應用于您的項目中
4)、使用簡單,友善
即可以選擇圖檔又可以選擇其他檔案
選擇圖檔
上傳圖檔
隻能選擇圖檔
選擇圖檔
上傳圖檔
重新上傳
$(function() {
var uploader = uploadImage({
wrap: jQuery("#uploader"), //包裹整個上傳控件的元素,必須。可以傳遞dom元素、選擇器、jQuery對象
//width: "160px",
height: 100, //預覽圖檔的高度
auto: false, //是否自動上傳
method: "POST", //上傳方式,可以有POST、GET
sendAsBlob: false, //是否以二進制流的形式發送
viewImgHorizontal: true, //預覽圖是否水準垂直居中
fileVal: "file", // [預設值:'file'] 設定檔案上傳域的name。
btns: { //必須
uploadBtn: $("#upload_now"), //開始上傳按鈕,必須。可以傳遞dom元素、選擇器、jQuery對象
retryBtn: null, //使用者自定義"重新上傳"按鈕
chooseBtn: '#choose_file', //"選折圖檔"按鈕,必須。可以傳遞dom元素、選擇器、jQuery對象
chooseBtnText: "選擇檔案" //選擇檔案按鈕顯示的文字
},
pictureOnly: false, //隻能上傳圖檔
datas: {
"uuid": new Date().getTime()
}, //上傳的參數,如果有參數則必須是一個對象
// 不壓縮image, 預設如果是jpeg,檔案上傳前會壓縮一把再上傳!false為不壓縮
resize: false,
//是否可以重複上傳,即上傳一張圖檔後還可以再次上傳。預設是不可以的,false為不可以,true為可以
duplicate: false,
multiple: true, //是否支援多選能力
swf: "Uploader.swf", //swf檔案路徑,必須
url: "index2.html", //圖檔上傳的路徑,必須
maxFileNum: 20, //最大上傳檔案個數
maxFileTotalSize: 10485760, //最大上傳檔案大小,預設10M
maxFileSize: 2097152, //單個檔案最大大小,預設2M
showToolBtn: true, //當滑鼠放在圖檔上時是否顯示工具按鈕,
onFileAdd: null, //當有圖檔進來後所處理函數
onDelete: null, //當預覽圖銷毀時所處理函數
uploadFailTip: null,
onError: null, //上傳出錯時執行的函數
notSupport: null, //當浏覽器不支援該插件時所執行的函數
onSuccess: null
});
//uploader.refresh();//該方法可以重新渲染選擇檔案按鈕
//uploader.upload();//調用該方法可以直接上傳圖檔
//uploader.retry();//調用該方法可以重新上傳圖檔
console.log(uploader);
var uploader2 = uploadImage({
wrap: "#uploader2", //包裹整個上傳控件的元素,必須。可以傳遞dom元素、選擇器、jQuery對象
//width: "160px",
height: 120, //預覽圖檔的高度
fileVal: "file", // [預設值:'file'] 設定檔案上傳域的name。
btns: { //必須
uploadBtn: $("#upload_now2"), //開始上傳按鈕,必須。可以傳遞dom元素、選擇器、jQuery對象
retryBtn: "#retry_upload", //使用者自定義"重新上傳"按鈕
chooseBtn: '#choose_file2', //"選折圖檔"按鈕,必須。可以傳遞dom元素、選擇器、jQuery對象
chooseBtnText: "選擇圖檔" //選擇檔案按鈕顯示的文字
},
pictureOnly: true, //隻能上傳圖檔
resize: false,
//是否可以重複上傳,即上傳一張圖檔後還可以再次上傳。預設是不可以的,false為不可以,true為可以
duplicate: true
});
});