前言
之前用過Uploadify控件實現文件上傳的功能，並還寫過一篇博文（具體鏈接文件上傳）。說到這兒，再次吐槽CSDN，調整網站把舊博文也變醜了，自己都不想看。算了，不說了，再回到當前話題，說一下如何通過uploadifive（uploadify的H5版本）實現文件上傳功能。
1、爲何選擇uploadifive
(1)、因爲uploadify用到了flash，而flash將會被棄用；（2）、希望能夠在移動端實現文件上傳
2、具體代碼及實現
talk is cheap，show me your code
（1）、前端代碼
//在前端的界面中增加相關引用
<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>
（2）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" value=@Model.LoginID>
<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事件，觸發了上傳的動作。
（3）後端代碼
//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);
}
}
以上。