Asp.NET MVC4 + Ajax 实现多文件上传
本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html
JS部分测试可以,jQuery部分没有测试先留着
HTML
<form > <input type="file" name="fileToUpload" /> <progress ></progress> <span ></span> <input type="button" onclick="UpladFile()" value="Upload" /> </form>
JS
<script type="text/javascript"> function UpladFile() { // js 获取文件对象 var fileObj = document.getElementById("fileToUpload2").files; // 接收上传文件的后台地址 var FileController = "/Home/Upload"; // FormData 对象 var form = new FormData(); // 可以增加表单数据 form.append("author", "hooyes"); // 文件对象 for (var i = 0; i < fileObj.length; i++) form.append("file" + i, fileObj[i]); // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function () { alert("上传完成!"); }; xhr.upload.addEventListener("progress", progressFunction, false); xhr.send(form); } function progressFunction(evt) { var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentage"); if (evt.lengthComputable) { progressBar.max = evt.total; progressBar.value = evt.loaded; percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; } } </script>
C#
[HttpPost] public ActionResult Upload() { HttpFileCollectionBase fileToUpload = Request.Files; foreach (string file in fileToUpload) { var curFile = Request.Files[file]; if (curFile.ContentLength < 1) continue; string path = System.IO.Path.Combine(Server.MapPath("~/Upload"), System.IO.Path.GetFileName(curFile.FileName)); curFile.SaveAs(path); } return RedirectToAction("Index"); }
jQuery
<script type="text/javascript"> $(document).ready(function () { $('#form1').submit(function () { var formdata = new FormData(); var fileObj = document.getElementById("fileToUpload2").files; for (var i = 0; i < fileObj.length; i++) formdata.append("file" + i, fileObj[i]); $.ajax({ type: 'POST', url: '/Home/Upload2', data: formdata, /** *必须false才会自动加上正确的Content-Type */ contentType: false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData: false }).then(function () { alert('done'); }, function () { //failCal }); return false; }); $("#btn").bind("click", ajaxUpload); }); function ajaxUpload() { $("#form1").submit(); } </script>