ASP.NET MVC实现文件上传（uploadifive）
前言
之前用过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);
}
}
以上。