前言
之前用過Uploadify控件實作檔案上傳的功能，并還寫過一篇博文（具體連結檔案上傳）。說到這兒，再次吐槽CSDN，調整網站把舊博文也變醜了，自己都不想看。算了，不說了，再回到目前話題，說一下如何通過uploadifive（uploadify的H5版本）實作檔案上傳功能。
為何選擇uploadifive
(1)、因為uploadify用到了flash，而flash将會被棄用；（2）、希望能夠在移動端實作檔案上傳
具體實作
前端Html代碼
//在前端的界面中增加相關引用
<html>
<head>
...
//添加相關樣式
<link href="~/Scripts/styles/uploadifive.css" rel="stylesheet" />
</head>
<body>
<!--前端界面的代碼-->
<div id="upload_div_diag" style="display:none">
<div id="queue"></div> <!--用于顯示進度-->
<input id="file_upload" name="file_upload" type="file"> <!--檔案上傳等内容-->
</div>
//添加js檔案
<script src="~/Scripts/chatScript/jquery.min.js"></script>
<script src="~/Scripts/chatScript/jquery-ui.js" type="text/javascript"></script>
<script src="~/Scripts/chatScript/jquery.uploadifive.js"></script>
</body>
</html>
JS端的代碼
$('#file_upload').uploadifive({
'auto': false, //不要選中檔案後立刻上傳
'fileObjName': 'fileData', //後端方法的參數名稱
'fileType': 'image/*', //上傳的檔案類型
'queueID': 'queue', //用于顯示上傳進度的區域ID
'uploadScript': '/Consultation/upLoad', //背景處理上傳的方法
'method': 'post',
'buttonText': '選擇圖檔', //按鈕的名稱
//同時上傳的參數，這兒有個坑，後面說
'formData': {
'id': $("#current_id").val(),
'consultationid': $("#consultation_id").val()
},
'uploadLimit': 0, //是否限定上傳數量。0：不限定
'queueSizeLimit': 0, //是否限定
'onUploadComplete': function (file, data) { //每個檔案上傳OK後的回調方法
var revice_data_array = JSON.parse(data);
if (revice_data_array.result)
{
} else {
alert(revice_data_array.msg);
}
},
'onQueueComplete': function (uploads) { //全部上傳成功後的回調方法
$("#queue").children().remove();
$("#upload_div_diag").dialog("close");
}
});
具體參數可以到網上檢視，百度一搜就出來，寫的還特别詳細。是以就不展開細說了。
說一下這兒（formData）的坑。
uploadifive不支援動态傳值。它隻能傳遞html界面初始化時的元素的值。
例如：我界面中有以下兩個文本框
<input type="text" id="current_id" style="display:none" [email protected]>
<input type="text" id="consultation_id" style="display:none" >
當我使用如下的代碼傳值時
'formData': {
'id': $("#current_id").val(),
'consultationid': $("#consultation_id").val()
},
id參數是有值，而consultationid參數是無值的。即，uploadifive無法動态傳值，要想動态傳值，需要通過設定參數的方式實作。如下代碼所示
$('#file_upload').data('uploadifive').settings.formData = {
'id': $("#current_id").val(),
'consultationid': $("#consultation_id").val()
};
$('#file_upload').uploadifive('upload'); //觸發上傳
是以，你需要在另外地方出發這個代碼（例如點選按鈕類似）
具體實作如上圖所示：選擇圖檔的按鈕（圖中的1）使用的是初始化的代碼；而“上傳”按鈕（圖中的2）的click事件，觸發了上傳的動作。
後端代碼
//string id, string consultationid為我業務需要的兩個參數資料
//此處JSON轉換用到了 using Newtonsoft.Json;
public string upLoad(HttpPostedFileBase fileData,string id, string consultationid)
{
var message = new { result = false, msg = "init",appendmsg="", appendfilename = "" };
try
{
if (fileData == null || String.IsNullOrEmpty(fileData.FileName) || fileData.ContentLength == 0)
{
message = new { result = false, msg = "接收參數異常，檔案為null", appendmsg = "",appendfilename="" };
return JsonConvert.SerializeObject(message);
}
string base_path = createDirectory(id, consultationid);
string filename = System.IO.Path.GetFileName(fileData.FileName);
string full_path = Path.Combine(base_path, filename);
//判斷是否存在，若存在，則删除檔案
if (System.IO.File.Exists(full_path)) System.IO.File.Delete(full_path);
//檔案儲存
fileData.SaveAs(full_path);
message = new { result = true, msg = "ok", appendmsg = full_path, appendfilename = filename };
return JsonConvert.SerializeObject(message);
}
catch(Exception ex)
{
message = new { result = true, msg = "發生異常！異常資訊如下："+ex.Message, appendmsg = "", appendfilename = "" };
return JsonConvert.SerializeObject(message);
}
}
以上。
代碼下載下傳
使用百度雲盤，下載下傳位址：源碼下載下傳，提取碼：NHZL
更新
2021-2-24更新
包含的方法
'onAddQueueItem' : function(file) {}, // Triggered for each file that is added to the queue
'onCancel' : function(file) {}, // Triggered when a file is cancelled or removed from the queue
'onCheck' : function(file, exists) {}, // Triggered when the server is checked for an existing file
'onClearQueue' : function(queue) {}, // Triggered during the clearQueue function
'onDestroy' : function() {} // Triggered during the destroy function
'onDrop' : function(files, numberOfFilesDropped) {}, // Triggered when files are dropped into the file queue
'onError' : function(file, fileType, data) {}, // Triggered when an error occurs
'onFallback' : function() {}, // Triggered if the HTML5 File API is not supported by the browser
'onInit' : function() {}, // Triggered when UploadiFive if initialized
'onQueueComplete' : function() {}, // Triggered once when an upload queue is done
'onProgress' : function(file, event) {}, // Triggered during each progress update of an upload
'onSelect' : function() {}, // Triggered once when files are selected from a dialog box
'onUpload' : function(file) {}, // Triggered when an upload queue is started
'onUploadComplete' : function(file, data) {}, // Triggered when a file is successfully uploaded
'onUploadFile' : function(file) {}, // Triggered for each file being uploaded
重點
也可以在onSelect等方法中實作動态傳參
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)