之前項目用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觸發后觸發






