使用webuploader上傳圖片,對格式大小有限制。
下面是我是用中的一些總結,有不對的地方,希望大佬們指出。
廢話不多說,下面正文
文件大小限制
fileNumLimit: xx,//上傳數量限制 fileSizeLimit: xx,//限制上傳所有文件大小 fileSingleSizeLimit: xx,//限制上傳單個文件大小
accept: {// 只允許選擇圖片文件格式
title: 'Images', extensions: 'gif,jpg,bmp,png', mimeTypes: 'image/*' },
提示信息
type是錯誤編碼。不清楚的錯誤可以打印出來看一下,使用的layer彈出提示、可以改的。
/** * 驗證文件格式以及文件大小 */ uploader.on("error", function (type) { if (type == "Q_TYPE_DENIED") { layer.msg("請上傳JPG、PNG、GIF、BMP格式文件"); } else if (type == "Q_EXCEED_SIZE_LIMIT") { layer.msg("文件大小不能超過2M"); }else { layer.msg("上傳出錯!請檢查后重新上傳!錯誤代碼"+type); } });
一些錯誤
我碰到還一種情況是要初始化的空間隱藏狀態,控件沒有初始化。解決方法是在控件顯示出來后在調用一次函數,就是在初始化一次。
單張圖片上傳完后,想要修改再次上傳圖片是沒有效果,我在網上查找到了 說加上duplicate: true
但是我的還是沒有效果,解決方法是上傳完成后再次初始化控件。
源碼如下,有明白問什么都同學還請告知一二。
下面貼出全部代碼。僅供參考
/** * @param url 地址 * @param num 上傳數量 * @param totalSize 限制上傳所有文件大小 * @param singleSize 限制上傳單個文件大小 */ function initWebuploader(url,num,totalSize,singleSize,rootPath) { uploader = WebUploader.create({ fileNumLimit: num,//上傳數量限制 fileSizeLimit: totalSize,//限制上傳所有文件大小 fileSingleSizeLimit: singleSize,//限制上傳單個文件大小 auto: true, // swf文件路徑 // swf: BASE_URL + '/js/Uploader.swf', // 文件接收服務端。 server: url, // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建,可能是input元素,也可能是flash. pick: '#picker', // 不壓縮image, 默認如果是jpeg,文件上傳前會壓縮一把再上傳! resize: false,//重復上傳
fileSingleSizeLimit:2*1024*1024,//上傳限制2M
accept: {// 只允許選擇圖片文件格式
title: 'Images', extensions: 'gif,jpg,bmp,png', mimeTypes: 'image/*' }, duplicate: true }); //上傳每個文件之前設置額外參數 uploader.on("uploadStart", function () { }); uploader.on("startUpload", function () { }); uploader.on("uploadSuccess", function (file, response) { $("#imgView").attr("src", rootPath + response); $("#photo").val(response); layer.msg("上傳成功"); }); uploader.on("uploadFinished", function () { //layer.msg("上傳成功") //多次上傳,頁面使用webuploader1來調用,實現多次上傳效果 // function initWebuploader1() { // initWebuploader(...); // } uploader.destroy(); initWebuploader(url,num,totalSize,singleSize,rootPath); }); /** * 驗證文件格式以及文件大小 */ uploader.on("error", function (type) { if (type == "Q_TYPE_DENIED") { layer.msg("請上傳JPG、PNG、GIF、BMP格式文件"); } else if (type == "Q_EXCEED_SIZE_LIMIT") { layer.msg("文件大小不能超過2M"); }else { layer.msg("上傳出錯!請檢查后重新上傳!錯誤代碼"+type); } }); }