ASP.NET MVC 4 批量上传文件
上传文件的经典写法：
<form id="uploadform" action="/Home/UploadFile" method="post" enctype="multipart/form-data"> <input type="file" name="uploadfile" /> <input type="submit" value="上传" /> </form>
这里的表单form里只有1个file，所以也就只能一次上传一个文件。如果需要上传的文件很多，希望在打开浏览文件窗口后可以用鼠标框选或按着键盘的ctrl键用鼠标去点选，该怎么办呢？
第一种方法——有几个file就在form里写几个file：
<input type="file" name="uploadfile" /> <input type="file" name="uploadfile" /> <input type="file" name="uploadfile" /> <input type="file" name="uploadfile" /> <input type="file" name="uploadfile" /> ......
Oh my god ！
如果有20个文件要上传的话就写20个<input type="file" name="uploadfile" />？不可以！
第二种方法——用jquery克隆文件
这样form里还是只写一个file，然后用jquey去动态添加。效果如图：
<form id="uploadform" action="/Home/UploadFile" method="post" enctype="multipart/form-data"> 当前有<span id="inputNum">1</span>个文本框，已选择<label id="fileNum">0</label>个文件。 <div id="upload"> <input type="file" name="uploadfile" style="border: 1px solid gray; width: 500px;" /> </div> <input type="submit" value="上传" /> </form> <div id="status"></div>
我们想在文本框后面加一个“添加”、“删除“的链接，点击后增加一个文件框或删除。
既然这个input file是动态添加的，那么后面跟着的“取消”、”增加”也是跟着一起创建的。本以为很难，结果用jquery反而很简单的：
$("input[type=file]").after(
//" <a href='#' class='clear-inputfile'>清除内容</a>" + " | " +
" <a href='#' class='removeInputFile'>取消</a> " + " | " +
" <a href='#' class='addInputFile'>增加</a>"
);
先用input[type=file]找到这个inputy，然后在他的后面（after）加上超链接（a），就这么简单！
Jquery：
//增加多个文本框 （复制当前行） $('.addInputFile').click(function () { var clone = $(this).parent().clone(true);//true:连事件一起复制 var file = clone.children("input[type=file]").val(null); $(clone).insertAfter($(this).parent()); });
clone() 方法
定义和用法
clone() 方法生成被选元素的副本，包含子节点、文本和属性。
语法
$(selector).clone(includeEvents)
这里把事件一起复制了，所以是：
var clone = $(this).parent().clone(true);
注意我们复制的是<div id="upload">。
如果已经选择了文件，克隆后会把文件框里的内容一起复制过来，所以在val()中加上null清除内容：
var file = clone.children("input[type=file]").val(null);
增加后也要有取消，当取消到只剩一个的时候给个提示。
//删除 $('.removeInputFile').click(function () { var num = $('#upload input[type=file]').length; if (num == 1) { alert('必须保留一个！'); return false; } $(this.parentElement).remove(); });
动态添加文件操作完毕！
上传文件后如果刷新浏览器会再次提交，这个问题很普遍，一不注意就重复提交了。所以这里采用ajax的方式上传文件！用mvc的Ajax.BeginForm吗？这个就是异步的啊！但是如果不配合一个插件来的话，单靠Ajax.BeginForm还是不能完成异步上传文件并且避免刷新重复提交！！这个插件就是jquery.form.js。
$('form').ajaxForm({
dataType: "html",//json也可以，以避免FF里此错误：HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy
///判断是否有文件 formData不支持IE!
///formData is an array of objects
///representing the name and value of each field that will be sent to the server;
beforeSubmit: function (formData) {
//没有选择文件则退出
if (selectedFileNum() == 0) {
alert("请选择文件!");
return false;
}
},
success: function (responseText) {//responseText:后台传来的string
status.html(responseText);
},
error: function (xhr, textStatus, errorThrown) {//在前端挡住请求
alert('文档上传错误.' + xhr.responseText);//例如文件过大等错误
status.html(xhr.responseText);
},
complete: function (xhr) {
status.html(xhr.responseText);
$("form").resetForm();//重置表单
}
});//end jquey.form
Ajax.BeginForm也要配合jquery.form.plugin一起使用
Ajax.BeginForm的写法：
@using (Ajax.BeginForm( "UploadFile", "Home", new AjaxOptions { UpdateTargetId = "status", HttpMethod = "Post" }, new { enctype = "multipart/form-data" } ) ) { <div id="upload"> <input type="file" name="uploadfile" style="border: 1px solid gray;" /> </div> <input type="submit" value="上传" /> }
目前都是前端的操作，接下来看后台的保存文件到服务器是怎么做的。
Controller:
//上传文件 [HttpGet] public ActionResult UploadFile() { return View(); } [HttpPost] public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> uploadfile) { foreach (var file in uploadfile) { if (file != null && file.ContentLength > 0) { var fileName = Path.GetFileName(file.FileName); var path = Path.Combine(Server.MapPath("~/Uploads"), fileName); //如遇相同文件则先删除再保存 if (System.IO.File.Exists(path)) System.IO.File.Delete(path); file.SaveAs(path); } } return Content("上传完毕！"); }
因为上传的是多个文件，所以这里要用IEnumerable<HttpPostedFileBase>类型。使用HttpPostedFileBase来接收传递的文件是ASP.NET MVC的推荐做法，不推荐用Request。要注意HttpPostedFileBase类型的参数uploadfile，这个名称要和前端form里的input的name保持一致！
第三种方法——使用jquery上传插件
上面说那么多，其实这个才是主角。
要想一次性在浏览窗口中选中多个文件同时上传到服务器，还是要用个插件才方便。寻觅很久还是发现uploadify最合心意，其他的也很优秀，但是在IE浏览器里无法一次多选，只能是点一次选一个点一次选一个，然后一起上传。
uploadify常用的一些设置：
$(document).ready(function () { $("#myUploadFile").uploadify({ //属性 'auto': true, //自动上传 'height': 30, //按钮的高度 'width': 80, //按钮的宽度 'swf': '../Scripts/Uploadify/uploadify.swf', //必输入！flash.注意路径！！ 'fileObjName': 'uploadfile', //传递给后台程序的参数, 否则会接收不到！ 'uploader': '../Home/Uploadify', //后台处理程序. 注意路径！！ 'queueID': 'queue', //显示上传队列的容器 'buttonText': '选择文件', //按钮显示文字 //'fileSizeLimit': '5MB', //'queueSizeLimit': 5, //同时允许上传5个文件 'fileTypeExts': '*.xls;*.xlsx', 'removeCompleted': false, //上传后保持队列不消失 'requeueErrors': true, //事件 'onSelect': function (file)//从浏览窗口中选择文件 { if (file.size / 1024 / 1024 > 10) //文件10M { alert('文件过大，请分批上传！'); $('#myUploadFile').uploadify('cancel', file.id); //cancel方法可以带上file的id作为参数，指定取消该项。 } }, 'onCancel': function (file)//从队列中取消文件 { //alert('文件： ' + file.name + ' 被取消.'); //document.getElementById("fileCount").value -= 1; }, 'onClearQueue': function (queueItemCount) {//只在未上传前有效，上传后其实还保存在队列中。 //alert(queueItemCount + ' file(s) were removed from the queue'); }, 'onDialogClose': function (queueData) //当浏览窗口关闭时 { //alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.'); //document.getElementById("fileCount").value = queueData.queueLength; //队列中文件数量 //document.getElementById("lblStatus").innerText = ""; }, 'onQueueComplete': function (queueData)//全部上传完毕后触发 { //alert(queueData.uploadsSuccessful + ' 个文件成功上传。上传后请点击“提交”。'); //document.getElementById("fileCount").value = ""; //window.location.href = "Default.aspx"//重加载页面 // window.location.reload(); // //alert("reload"); //alert("upload Done"); }, 'onUploadError': function (file, errorCode, errorMsg, errorString) { alert('The file ' + file.name + ' 上传失败: ' + errorString); //alert('errorCode:'+errorCode); //alert('errormsg:' + errorMsg);//500 //alert('errorString:' + errorString);//HTTP Error (500) }, 'onUploadSuccess': function (file, data, response) { //alert('The file ' + file.name + ' 上传成功！'); //alert('data is :' + data);//data是controller传来的str $('#msg').text(data); //alert('response is :' + response); //response is true }, 'onSelectError': function (file, errorCode, errorMsg) //错误信息 { switch (errorCode) { case -100: alert("上传的文件数量已超过系统限制的" + $('#myUploadFile').uploadify('settings', 'queueSizeLimit') + "个文件"); break; case -110: alert("文件(" + file.name + ")大小超出系统限制的" + $('#myUploadFile').uploadify('settings', 'fileSizeLimit') + "大小！"); break; case -120: alert("文件(" + file.name + ")大小异常！"); break; case -130: alert("文件(" + file.name + ")类型不正确！"); break; } } }); }); <input type="file" id="myUploadFile" /> <p id="queue"></p>
Controller:
[HttpGet] public ActionResult Uploadify() { return View(); } [HttpPost] public ActionResult Uploadify(HttpPostedFileBase uploadfile) { if (uploadfile != null && uploadfile.ContentLength > 0) { var fileName = Path.GetFileName(uploadfile.FileName); var path = Path.Combine(Server.MapPath("~/Uploads"), fileName); if (System.IO.File.Exists(path)) System.IO.File.Delete(path); uploadfile.SaveAs(path); } return Content("上传完毕！"); }
这样就满足了同时上传文件的需要——在IE里。
--End--