view：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.form.js"></script> </head> <body> <div> 頁面上傳需要注意以下幾點：<br /> 1、同一個頁面可以有不止一個form但是不能嵌套<br /> 2、form：method="post" enctype="multipart/form-data"<br /> 3、input：type="file" name="XX" 必須要有name值<br /> </div> <div style="margin-top:20px;"> submit直接提交：提交后刷新頁面,直接使用ajax不能把file傳到后台處理<br /> <form method="post" action="UpLoadPic" enctype="multipart/form-data"> <input type="file" name="filename" id="filename" accept="image/*" /> <input type="submit" value="提交" /> </form> </div> <script> $(function () { var options = { success: function (data) { alert("成功"); } }; //$("#myform1").ajaxForm(options); $("#myform1").submit(function () { $(this).ajaxSubmit(options); return false; }); }); </script> <div style="margin-top:20px;"> jQuery.Form.js參照：http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html <br /> http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html <br /> http://www.cnblogs.com/xiaofeixiang/p/3676597.html <br /> 每次還會刷新頁面 <form id="myform1" method="post" action="UpLoadPic1" enctype="multipart/form-data"> <input type="file" name="filename1" id="filename1" accept="image/*" /> <input id="tijiao1" type="submit" value="提交" /> </form> <div id="outputdiv"></div> </div> <script src="~/Scripts/ajaxfileupload.js"></script> <div style="margin-top:20px;"> ajaxfileupload.js參照：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html <br /> <form method="post" action="GetPic" enctype="multipart/form-data"> <input type="file" name="filename2" id="filename2" accept="image/*" /> <input type="button" value="提交" onclick="f2submit();" /> </form> <script> function f2submit() { //文件上傳 $.ajaxFileUpload({ url: 'UpLoadPic2', secureuri: false, fileElementId: 'filename2', success: function () { alert("成功"); }, error: function () { alert("失敗"); }, }); return false; } </script> </div> <script src="~/Scripts/uploadify/jquery.uploadify.min.js"></script> <div style="margin-top:20px;"> jquery.uploadify.js參照：http://blog.sina.com.cn/s/blog_5079086b0101fkmh.html <br /> 局部刷新 <form method="post" enctype="multipart/form-data"> <input type="text" id="FilePathName" readonly="readonly" style="width: 300px;" /> <input type="file" name="filename3" id="filename3" accept="image/*" /> <input type="button" value="提交" onclick="f3submit()" /> </form> <script> $(function () { $('#filename3').uploadify({ //'multi': false, //'uploadLimit': 100, auto: false, // 是否直接上傳 //width: 64, //height: 28, buttonText: "瀏覽", 'fileSizeLimit': '20MB', 'fileTypeExts': '*.doc;*.docx;*.xlsx;*.pdf;*.ppt;*.pptx;*.xls;*.jpg;*.png;', swf: '/Scripts/uploadify/uploadify.swf', //uploader: '/Scripts/uploadify/UploadFile.ashx', uploader: '/Home/UpLoadPic3', onSelect: function (file) { $("#FilePathName").val(file.name); }, 'onSelectError': function (file, errorCode, errorMsg) { if (errorCode == -110) { errorMsg = "文件大小不能超過20MB！"; } else if (errorCode == -100) { errorMsg = "已經有文件在隊列中，請先取消之前的文件！"; } else if (errorCode == -130) { errorMsg = "文件格式錯誤，請選擇正確格式的文件！"; } else { errorMsg = "未知錯誤！"; } alert(errorMsg); return false; }, onUploadSuccess: function (file) { alert("成功"); } }); }); function f3submit() { $('#filename3').uploadify('upload'); } </script> </div> <div style="margin-top:20px;"> FormData提交參照：http://www.cnblogs.com/hutuzhu/p/4409292.html <br /> FormData為HTML5對象，只支持新瀏覽器<br /> <form id="myform4" name="myform4"> <input type="file" name="filename4" id="filename4" accept="image/*" /> <input type="button" value="提交" onclick="f4submit()" /> </form> <script type="text/javascript"> function f4submit() { var form = document.getElementById("myform4"); var formData = new FormData(form); var oReq = new XMLHttpRequest(); oReq.onreadystatechange = function () { if (oReq.readyState == 4) { if (oReq.status == 200) { alert(xhr.responseText); } else { alert("失敗"); } } } oReq.open("POST", "UpLoadPic4"); oReq.send(formData); return false; } </script> </div> <hr /> <a href="/Home/GetFileByContent">根據文件內容下載二進制方式上傳的文件</a> <br /> <a href="/Home/GetFileByPath">根據文件保存路徑下載上傳的文件</a> </body> </html>
controller：
public static string FilePath = string.Empty; public static byte[] FileContent; /// <summary> /// 視圖 /// </summary> /// <returns></returns> public ActionResult UpFile() { return View(); } /// <summary> /// submit /// </summary> [HttpPost] public void UpLoadPic() { SaveFileDirect(); //SaveFileStream(); Response.Redirect("Upfile"); } /// <summary> /// ajaxSubmit /// </summary> [HttpPost] public void UpLoadPic1() { SaveFileDirect(); //SaveFileStream(); Response.Redirect("Upfile"); } /// <summary> /// ajaxfileupload.js /// </summary> [HttpPost] public void UpLoadPic2() { //SaveFileDirect(); SaveFileStream(); } /// <summary> /// jquery.uploadify.js /// </summary> public void UpLoadPic3() { //SaveFileDirect(); SaveFileStream(); } /// <summary> /// FormData /// </summary> public void UpLoadPic4() { //SaveFileDirect(); SaveFileStream(); } /// <summary> /// 直接保存上傳文件到指定目錄 /// </summary> public void SaveFileDirect() { // 獲取文件 var upfile = Request.Files[0]; // 拼接保存路徑 string uppath = Server.MapPath("~/UpFile/") + Path.GetFileName(upfile.FileName); // 存入指定目錄 if (upfile.ContentLength > 0) { upfile.SaveAs(uppath); } FilePath = uppath; FileContent = null; } /// <summary> /// 通過二進制流保存文件，可以存入數據庫 /// </summary> public void SaveFileStream() { // 獲取文件 var upfile = Request.Files[0]; // 拼接保存路徑 string uppath = Server.MapPath("~/UpFile/") + Path.GetFileName(upfile.FileName); // 讀入文件流 byte[] temp = new byte[upfile.InputStream.Length]; upfile.InputStream.Read(temp, 0, (int)upfile.InputStream.Length); // 寫到指定目錄 using (FileStream fs = new FileStream(uppath, FileMode.OpenOrCreate, FileAccess.ReadWrite, FileShare.ReadWrite)) { fs.Write(temp, 0, temp.Length); } FilePath = uppath; FileContent = temp; } /// <summary> /// FileContentResult方式下載 /// </summary> /// <returns></returns> public FileResult GetFileByContent() { List<string> typeList = new List<string>() { ".png", ".jpg", ".jpeg" }; string FileName = Path.GetFileName(FilePath); if (FileContent != null && FileContent.Length > 0) { if (typeList.Contains(Path.GetExtension(FileName))) { return File(FileContent, "image/jpg"); } // 存在fileDownLoad屬性的FileResult以附件形式下載，默認會以內聯方式打開 return File(FileContent, "application/octet-stream", FileName); } return null; } /// <summary> /// FilePathResult方式下載 /// </summary> /// <returns></returns> public FileResult GetFileByPath() { List<string> typeList = new List<string>() { ".png", ".jpg", ".jpeg" }; string FileName = Path.GetFileName(FilePath); if (FileName != null) { if (typeList.Contains(Path.GetExtension(FileName))) { return File(FilePath, "image/jpg"); } // 存在fileDownLoad屬性的FileResult以附件形式下載，默認會以內聯方式打開 return File(FilePath, "application/octet-stream", FileName); } return null; }