天天看點

ajax異步多圖上傳插件,支援IE8的多檔案、多圖異步上傳并能預覽的插件即可以選擇圖檔又可以選擇其他檔案

ajax異步多圖上傳插件,支援IE8的多檔案、多圖異步上傳并能預覽的插件即可以選擇圖檔又可以選擇其他檔案
ajax異步多圖上傳插件,支援IE8的多檔案、多圖異步上傳并能預覽的插件即可以選擇圖檔又可以選擇其他檔案

插件描述:該插件是基于百度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

});

});