之前項目用uploadify(flash version)實現圖片上傳功能,但是由于chrome瀏覽器已經屏蔽flash,并且flash的上傳插件瀏覽器兼容性也不夠,于是找了Huploadify替代uploadify,原因如下:
1、不依賴于flash。
2、庫文件大小是uploadify的三分之一。
3、瀏覽器兼容性測試,支持ie11、firefox(版本 33.1.1)、chrome(版本 38.0.2125),移動端支持安卓,iPhone圖片上傳(其他瀏覽器沒測)。
4、不用改服務端。
一、接下來說下Huploadify的安裝:
git下載地址:https://github.com/Double-Lv/Huploadify
考慮到部分朋友無法打開GitHub,直接戳這里下載吧! Huploadify-master.zip
下載后如下css和js文件在head中引入(jquery.Huploadify.js要在jquery庫文件后引入):
Huploadify.css
jquery.Huploadify.js
二、實現上傳代碼:
html如下
<img src="" alt="" class="cardImg" id="imgid"/><!--預覽圖片--> <div id="fileid"></div><!--圖片上傳按鈕-->
js如下
/* *圖片上傳公共方法 *domName 圖片上傳的div的ID *domPic 顯示上傳后圖片img的ID,如無圖片預覽可不設置 */ function uploadInit(domName,domPic){ $("#"+domName).Huploadify({ auto:true, fileTypeExts:'*.*', multi:false, fileObjName:'Filedata', fileSizeLimit:99999999999, showUploadedPercent:false, buttonText:'上傳', uploader:param.uploadurl, onUploadSuccess:function(file,data){ var Data=JSON.parse(data); if(Data.success==true){ $("#"+domPic).attr("src",Data.result); param.uploadsuccess(Data.result); }else{ jQuery.longhz.alert(Data.resultDes); } }, onUploadError:function(file,response){ jQuery.longhz.alert("上傳失敗!"); } }); } //調用公共方法 uploadInit("fileid","imgid");
三、Huploadify的配置
打開jquery.Huploadify.js能看到Huploadify的完整配置項,如下:
var defaults = { fileTypeExts:'*.*',//允許上傳的文件類型,格式'*.jpg;*.doc' uploader:'',//文件提交的地址 auto:false,//是否開啟自動上傳 method:'post',//發送請求的方式,get或post multi:true,//是否允許選擇多個文件 formData:null,//發送給服務端的參數,格式:{key1:value1,key2:value2} fileObjName:'file',//在后端接受文件的參數名稱,如PHP中的$_FILES['file'] fileSizeLimit:2048,//允許上傳的文件大小,單位KB showUploadedPercent:true,//是否實時顯示上傳的百分比,如20% showUploadedSize:false,//是否實時顯示已上傳的文件大小,如1M/2M buttonText:'選擇文件',//上傳按鈕上的文字 removeTimeout: 1000,//上傳完成后進度條的消失時間,單位毫秒 itemTemplate:itemTemp,//上傳隊列顯示的模板 onUploadStart:null,//上傳開始時的動作 onUploadSuccess:null,//上傳成功的動作 onUploadComplete:null,//上傳完成的動作 onUploadError:null, //上傳失敗的動作 onInit:null,//初始化時的動作 onCancel:null,//刪除掉某個文件后的回調函數,可傳入參數file onClearQueue:null,//清空上傳隊列后的回調函數,在調用cancel并傳入參數*時觸發 onDestroy:null,//在調用destroy方法時觸發 onSelect:null,//選擇文件后的回調函數,可傳入參數file onQueueComplete:null//隊列中的所有文件上傳完成后觸發 }
看注釋基本能看懂,不明白的找到相應的方法定義可知方法的使用條件,比如
onUploadSuccess:在返回狀態status為200時觸發 onUploadError:返回狀態status不為200時觸發 onUploadComplete:在onUploadSuccess或onUploadError觸發后觸發