之前專案用uploadify(flash version)實現圖片上傳功能，依賴於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

下載後如下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觸發後觸發
————————————————
版權宣告：本文為CSDN博主「鷹子」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/eagle_88/article/details/51423263