談到文件上傳，現在一般都用現成的組件可以使用。PC端的可以使用uploadify。針對微網站H5也有uploadifive。但是這組件並不能滿足各種場景的需求，例如：預覽 切圖 放大縮小,取消之類的。
普通上傳
HTML:
<form action="Upload" method="post" enctype="multipart/form-data"> <input id="File1" name="fileupload" type="file" value="" /><input id="" type="submit" value="上傳" /> </form>
服務端：
[HttpPost] public JsonResult Upload() { if (Request.Files.Count > 0) { if (Request.Files.Count == 1) { HttpPostedFileBase file = Request.Files[0]; if (file.ContentLength > 0) { string title = string.Empty; title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName); string path = "../UploadFile/" + title; path = System.Web.HttpContext.Current.Server.MapPath(path); file.SaveAs(path); return Json(new { status = true, url = path }); } } else { string[] urllist = new string[Request.Files.Count]; for (int i = 0; i < Request.Files.Count; i++) { HttpPostedFileBase file = Request.Files[i]; if (file.ContentLength > 0) { string title = string.Empty; title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName); string path = "../UploadFile/" + title; path = System.Web.HttpContext.Current.Server.MapPath(path); file.SaveAs(path); urllist[i] = path; } } return Json(new { status = true, url = urllist }); } } else { return Json(new { status = false, url = "",msg="沒有文件" }); } return Json(new { status = false, url = "",msg=""}); }
後端代碼沒什麼不同的，一直就是如此
主要是前端html，我標記爲紅色字體的屬性一個都不能少，少一個都不可能完成上傳
action
作用：該屬性的值指向要提交到某一個頁面,缺少它會不知道提交給誰
可以提交的頁面：abc.aspx abc.ashx mvc的控制器方法 webapi接口 以及其他後端處理程序
method
作用：該屬性的值決定以何種方式提交,缺少它會報404
可以取的值：post get put delete
enctype
作用：指定類型 缺少它在後臺接收時文件並不會包含進去
可以取的值：multipart/form-data application/x-www-form-urlencoded text/plain 此處必須使用 multipart/form-data才能將文件傳到服務端
name
input file 裏面必須包含name屬性才能夠將文件傳遞到服務器,具體原因不知道,有興趣的可以嘗試下 如果有知道的麻煩解惑
相信到了這裏你一定可以完成上傳文件操作了！
文件類型篩選
能完成基本的文件上傳操作之後，我們會對它有更多的要求，比如：文件篩選
相信大家都不願意讓人什麼類型的文件都往服務器上傳，萬一是病毒或者腳本之類的就麻煩大了。於是就開始了對文件的類型限制
accept
作用：就是用來做條件篩選的
取值範圍：
圖片類 image/gif image/jpeg image/png .. 多個類型之間用,隔開 如accept="image/gif, image/jpeg"
文檔類
doc application/msword
css text/css
excel application/vnd.ms-excel
ppt application/vnd.ms-powerpoint
多媒體類
mp3 audio/mpeg
mp4 audio/mp4 video/mp4
使用事例
<input id="File1" name="fileupload" accept="image/gif, image/jpeg" type="file" value="" />
更多類型詳情請參考http://blog.sina.com.cn/s/blog_6c9d65a10101a8yh.html
文件多選
有了文件類型限制後 有覺得可以多選是件多麼愜意的事情。憑什麼桌面應用可以web就不可以。事實證明 當然可以 而且很簡單
multiple="multiple"
在input file 標籤中加入multiple="multiple"屬性 就能愉快的多選文件了
現在最新的HTML代碼應該是這個樣子了
<form action="Upload" method="post" enctype="application/x-www-form-urlencoded" > <input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" /> <input id="" type="submit" value="上傳" /> </form>
來看看效果吧
普通上傳文件的不足
現在的功能已經可以滿足上傳基本需求了，但是事情完了嗎？遠遠沒有 因爲需求就像是程序員的天敵，就是一個字 "改"！這個能做成類似xx界面嗎？我覺得界面還可以再改改...
大多時候我們需要上傳文件成功後知道文件的地址或者是文件大小等數據，但是現在可能真沒辦法處理，因爲現在上傳成功後是這個樣子的
尼瑪 這是什麼鬼。雖然我服務器端上傳成功後確實是要返回文件路徑和狀態，現在也確實返回了 但是咱能不能不要這麼赤裸裸的顯示在頁面上？還有，之前上傳的頁面去哪了？？？
jquery ajax上傳文件後對返回數據做處理
經過一番改造之後 HTML代碼如下
1 <form id="uploadForm" action="Upload" method="post" enctype="multipart/form-data"> 2 <input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" /> 3 <input id="btnImportOK" type="button" value="上傳" /> 4 </form> 5 <script src="~/Scripts/jquery-1.8.3.min.js"></script> 6 <script type="text/javascript"> 7 8 9 10 11 12 $(document).ready(function () { 13 $("#btnImportOK").click(function () { 14 15 var formData = new FormData($("#uploadForm")[0]); 16 $.ajax({ 17 type: "POST", 18 data: formData, 19 url: "/Home/Upload", 20 contentType: false, 21 processData: false, 22 }).success(function (data) { 23 if (data.status) { 24 console.log(data.url); 25 } else { 26 console.log(data.msg); 27 } 28 29 }).error(function (data) { 30 alert(data); 31 console.log(data); 32 }); 33 34 }); 35 }); 36 </script>
執行結果
從打印結果可以看到，多文件上傳已經成功 並且能夠做邏輯控制了
這裏有2點必須特別說明
1.Jquery版本
從第15行html代碼可以看到
var formData = new FormData($("#uploadForm")[0]);
data傳遞過去的參數是formData 但是FormData這個類是jquery版本比較高的文件中纔會有 所以我這裏引用的是jquery1.83 之前asp.net mvc模板默認給我安裝的是jquery1.10.2的版本，是不支持的
2.$("form").serialize()
之前也查看網上資料 都推薦用它來上傳文件，於是就寫成了這樣
$.ajax({ type: "POST", data: $("#uploadForm").serialize(), url: "/Home/Upload", contentType: false, processData: false, }).success(function (data) { if (data.status) { console.log(data.url); } else { console.log(data.msg); } }).error(function (data) { alert(data); console.log(data); });
});
但是後臺一直沒有接收到文件，然後經過一番努力搜索資料翻答案，原來文件無法被serialize()序列化，最後推薦用FormData
圖片尺寸限制
啥也不說了 奉上代碼
<img id="picshow" width="200" height="200" src="" /> <form id="uploadForm" action="Upload" method="post" enctype="multipart/form-data"> <input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" /> <input id="btnImportOK" type="button" value="上傳" /> </form> <script src="~/Scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnImportOK").click(function () { var formData = new FormData($("#uploadForm")[0]); $.ajax({ type: "POST", data: formData, url: "/Home/Upload", contentType: false, processData: false, }).success(function (data) { if (data.status) { // 記錄當前時間戳 var start_time = new Date().getTime(); // 創建對象 var img = new Image(); // 改變圖片的src // img.src = data.url; 此處註釋是因爲上傳保存是路徑是本地磁盤 瀏覽器被阻止訪問 所以用了一個遠程圖片 img.src = "http://a0.att.hudong.com/05/23/01300000727181126443238971302.jpg"; // 定時執行獲取寬高 var check = function () { console.log(img.width); // 只要任何一方大於0 // 表示已經服務器已經返回寬高 if (img.width > 0 || img.height > 0) { clearInterval(set); if (img.width > 210 || img.height > 210 || img.width < 190 || img.height < 190) { alert('建議列表圖片尺寸爲200*200'); return; } $("#picshow").attr("src", img.src); $("#picshow").show(); } }; var set = setInterval(check, 40); } else { console.log(data.msg); } }).error(function (data) { alert(data); console.log(data); }); }); $("#picshow").hide(); }); </script>
總結
這次文件上傳就講到這裏吧。沒有什麼原理性和有深度的東西，就是教程。原諒才疏學淺，後面會越來越好的。
如果我的分享能幫到你，麻煩給點個贊吧！如果發現錯誤，也請及時拍磚！請關注我的個人主頁http://www.cnblogs.com/jingch