文件各類上傳

時間 2019-12-11

標籤文件各類上傳简体版

原文原文鏈接

轉http://www.cnblogs.com/zhaopei/p/upload.htmljavascript

閱讀目錄

做爲程序員的咱們，常常會要用到文件的上傳和下載功能。到了須要用的時候，各類查資料。有木有..有木有...。爲了方便下次使用，這裏來作個總結和備忘。css

利用表單實現文件上傳

最原始、最簡單、最粗暴的文件上傳。
前端代碼：html

//方式1 <form action="/Home/SaveFile1" method="post" enctype="multipart/form-data"> <input type="file" class="file1" name="file1" /> <button type="submit" class="but1">上傳</button> </form>

【注意】前端

一、須要post提交
二、enctype="multipart/form-data" （傳輸文件）
三、須要提交的表單元素須要設置 name 屬性

後臺代碼：java

public ActionResult SaveFile1() { if (Request.Files.Count > 0) { Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Request.Files[0].FileName); return Content("保存成功"); } return Content("沒有讀到文件"); }

表單異步上傳（jquery.form插件）

雖然上面的方式簡單粗暴，可是不夠友好。頁面必然會刷新。難以實現停留在當前頁面，並給出文件上傳成功的提示。
隨着時間的流逝，技術突飛猛進。ajax的出現，使得異步文件提交變得更加容易。
下面咱們利用jquery.form插件來實現文件的異步上傳。
首先咱們須要導入jquery.js和jquery.form.js
前端代碼：jquery

<form id="form2" action="/Home/SaveFile2" method="post" enctype="multipart/form-data"> <input type="file" class="file1" name="file1" /> <button type="submit" class="but1">上傳1</button> <button type="button" class="but2">上傳2</button> </form>

//方式2（經過ajaxForm綁定ajax操做） $(function () { $('#form2').ajaxForm({ success: function (responseText) { alert(responseText); } }); }); //方式3（經過ajaxSubmit直接執行ajax操做） $(function () { $(".but2").click(function () { $('#form2').ajaxSubmit({ success: function (responseText) { alert(responseText); } }); }); });

後臺代碼：git

public string SaveFile2() { if (Request.Files.Count > 0) { Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName)); return "保存成功"; } return "沒有讀到文件"; }

原理：
咱們不少時候使用了插件，就無論其餘三七二十一呢。
若是有點好奇心，想一想這個插件是怎麼實現的。隨便看了看源碼一千五百多行。個人媽呀，不就是個異步上傳嗎，怎麼這麼複雜。
難以看出個什麼鬼來，直接斷點調試下吧。

原來插件內部有iframe和FormData不一樣方式來上傳，來適應更多版本瀏覽器。程序員

模擬表單數據上傳（FormData）

iframe這東西太噁心。咱們看到上面能夠利用FormData來上傳文件，這個是Html 5 纔有的。下面咱們本身也來試試把。
前端代碼：github

<input id="fileinfo" type="file" class="notFormFile" /> <button type="button" class="btnNotForm">上傳4</button>

//方式4 $(".btnNotForm").click(function () { var formData = new FormData();//初始化一個FormData對象 formData.append("files", $(".notFormFile")[0].files[0]);//將文件塞入FormData $.ajax({ url: "/Home/SaveFile2", type: "POST", data: formData, processData: false, // 告訴jQuery不要去處理髮送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 success: function (responseText) { alert(responseText); } }); });

後的代碼：（不變，仍是上例代碼）web

public string SaveFile2() { if (Request.Files.Count > 0) { Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName)); return "保存成功"; } return "沒有讀到文件"; }

咱們看到，FormData對象也只是在模擬一個原始的表單格式的數據。那有沒有可能不利用表單或表單格式來上傳文件呢？答案是確定的。（下面立刻揭曉）
前端代碼：

<input type="file" id="file5" multiple> <button type="button" class="btnFile5">上傳5</button>

//方式5 $(".btnFile5").click(function () { $.ajax({ url: "/Home/SaveFile4", type: "POST", data: $("#file5")[0].files[0], processData: false, // 告訴jQuery不要去處理髮送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 success: function (responseText) { alert(responseText); } });; });

後臺代碼：

public string SaveFile4() { //這裏發現只能獲得一個網絡流，沒有其餘信息了。（好比，文件大小、文件格式、文件名等） Request.SaveAs(Server.MapPath("~/App_Data/SaveFile4.data") + "", false); return "保存成功"; }

細心的你發現沒有了表單格式，咱們除了能夠上傳文件流數據外，不能再告訴後臺其餘信息了（如文件格式）。
到這裏，我彷佛明白了之前上傳文件爲何非得要用個form包起來，原來這只是和後臺約定的一個傳輸格式而已。
其實咱們單純的用jq的ajax傳輸文本數據的時候，最後也是組裝成了form格式的數據，如：

$.ajax({
    data: { "userName": "張三" }

分片上傳

在知道了上面的各類上傳以後，咱們是否是就滿於現狀了呢？no，不少時候咱們須要傳輸大文件，通常服務器都會有必定的大小限制。
某天，你發現了一個激情小電影想要分享個你們。無奈，高清文件太大傳不了，怎麼辦？咱們能夠化整爲零，一部分一部分的傳嘛，也就是所謂的分片上傳。
前端代碼：

<input type="file" id="file6" multiple> <button type="button" class="btnFile6">分片上傳6</button> <div class="result"></div>

//方式6 $(".btnFile6").click(function () { var upload = function (file, skip) { var formData = new FormData();//初始化一個FormData對象 var blockSize = 1000000;//每塊的大小 var nextSize = Math.min((skip + 1) * blockSize, file.size);//讀取到結束位置 var fileData = file.slice(skip * blockSize, nextSize);//截取 部分文件 塊 formData.append("file", fileData);//將 部分文件 塞入FormData formData.append("fileName", file.name);//保存文件名字 $.ajax({ url: "/Home/SaveFile6", type: "POST", data: formData, processData: false, // 告訴jQuery不要去處理髮送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 success: function (responseText) { $(".result").html("已經上傳了" + (skip + 1) + "塊文件"); if (file.size <= nextSize) {//若是上傳完成，則跳出繼續上傳 alert("上傳完成"); return; } upload(file, ++skip);//遞歸調用 } }); }; var file = $("#file6")[0].files[0]; upload(file, 0); });

後臺代碼：

public string SaveFile6() { //保存文件到根目錄 App_Data + 獲取文件名稱和格式 var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"]; //建立一個追加（FileMode.Append）方式的文件流 using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) { using (BinaryWriter bw = new BinaryWriter(fs)) { //讀取文件流 BinaryReader br = new BinaryReader(Request.Files[0].InputStream); //將文件留轉成字節數組 byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length); //將字節數組追加到文件 bw.Write(bytes); } } return "保存成功"; }

相對而言，代碼量多了一點，複雜了一點。不過相對於網上的其餘分片上傳的代碼應該要簡單得多（由於這裏沒有考慮多文件塊同時上傳、斷點續傳。那樣就須要在後臺把文件塊排序，而後上傳完成按序合併，而後刪除原來的臨時文件。有興趣的同窗能夠本身試試，稍候在分析上傳插件webuploader的時候也會實現）。
效果圖：

【說明】：若是咱們想要上傳多個文件怎麼辦？其實H5中也提供了很是簡單的方式。直接在input裏面標記multiple，<input type="file" id="file6" multiple>，而後咱們後臺接收的也是一個數組Request.Files。

使用HTML5 拖拽、粘貼上傳

只能說H5真是強大啊，權限愈來愈大，操做愈來愈牛逼。
前端代碼（拖拽上傳）：

<textarea class="divFile7" style="min-width:800px;height:150px" placeholder="請將文件拖拽或直接粘貼到這裏"></textarea>

//方式7 $(".divFile7")[0].ondrop = function (event) { event.preventDefault();//不要執行與事件關聯的默認動做 var files = event.dataTransfer.files;//獲取拖上來的文件 //如下代碼不變 var formData = new FormData();//初始化一個FormData對象 formData.append("files", files[0]);//將文件塞入FormData $.ajax({ url: "/Home/SaveFile2", type: "POST", data: formData, processData: false, // 告訴jQuery不要去處理髮送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 success: function (responseText) { alert(responseText); } }); };

後臺代碼：
略（和以前的SaveFile2同樣）

前端代碼（粘貼上傳限圖片格式）：

//方式8 $(".divFile7")[0].onpaste = function (event) { event.preventDefault();//不要執行與事件關聯的默認動做 var clipboard = event.clipboardData.items[0];//剪貼板數據 if (clipboard.kind == 'file' || clipboard.type.indexOf('image') > -1) {//判斷是圖片格式 var imageFile = clipboard.getAsFile();//獲取文件 //如下代碼不變 var formData = new FormData; formData.append('files', imageFile); formData.append('fileName', "temp.png");//這裏給文件命個名（或者直接在後臺保存的時候命名） $.ajax({ url: "/Home/SaveFile8", type: "POST", data: formData, processData: false, // 告訴jQuery不要去處理髮送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 success: function (responseText) { alert(responseText); } }); } };

後臺代碼：

public string SaveFile8() { //保存文件到根目錄 App_Data + 獲取文件名稱和格式 var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"]; if (Request.Files.Count > 0) { Request.Files[0].SaveAs(filePath); return "保存成功"; } return "沒有讀到文件"; }

效果圖：

上傳插件（WebUploader）

已經列舉分析了多種上傳文件的方式，我想總有一種適合你。不過，上傳這個功能比較通用，而咱們本身寫的可能好多狀況沒有考慮到。接下來簡單介紹下百度的WebUploader插件。
比起咱們本身寫的簡單上傳，它的優點：穩定、兼容性好（有flash切換，因此支持IE）、功能多、併發上傳、斷點續傳（主要仍是靠後臺配合）。
官網：http://fex.baidu.com/webuploader/
插件下載：https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
下面開始對WebUploader的使用
第一種，簡單粗暴
前端代碼：

<div id="picker">選擇文件</div> <button id="ctlBtn" class="btn btn-default">開始上傳</button>

<!--引用webuploader的js和css--> <link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" /> <script src="~/Scripts/webuploader-0.1.5/webuploader.js"></script> <script type="text/javascript"> var uploader = WebUploader.create({ // (若是是新瀏覽器 能夠不用 flash) //swf: '/Scripts/webuploader-0.1.5/Uploader.swf', // 文件接收服務端。 server: '/Webuploader/SaveFile', // 選擇文件的按鈕。可選。 // 內部根據當前運行是建立，多是input元素，也多是flash. pick: '#picker' }); $("#ctlBtn").click(function () { uploader.upload(); }); uploader.on('uploadSuccess', function (file) { alert("上傳成功"); }); </script>

後臺代碼：

public string SaveFile() { if (Request.Files.Count > 0) { Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName)); return "保存成功"; } return "沒有讀到文件"; }

第二種，分片上傳。和咱們以前本身寫的效果差很少。
前端代碼：

var uploader = WebUploader.create({ //兼容老版本IE swf: '/Scripts/webuploader-0.1.5/Uploader.swf', // 文件接收服務端。 server: '/Webuploader/SveFile2', // 開起分片上傳。 chunked: true, //分片大小 chunkSize: 1000000, //上傳併發數 threads: 1, // 選擇文件的按鈕。 pick: '#picker' }); // 點擊觸發上傳 $("#ctlBtn").click(function () { uploader.upload(); }); uploader.on('uploadSuccess', function (file) { alert("上傳成功"); });

後臺代碼：

public string SveFile2() { //保存文件到根目錄 App_Data + 獲取文件名稱和格式 var filePath = Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName); //建立一個追加（FileMode.Append）方式的文件流 using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) { using (BinaryWriter bw = new BinaryWriter(fs)) { //讀取文件流 BinaryReader br = new BinaryReader(Request.Files[0].InputStream); //將文件留轉成字節數組 byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length); //將字節數組追加到文件 bw.Write(bytes); } } return "保存成功"; }

咱們看到了有個參數threads: 1上傳併發數，若是咱們改爲大於1會怎樣？前端會同時發起多個文件片上傳。後臺就會報錯，多個進程同時操做一個文件。
那若是咱們想要多線程上傳怎麼辦？改代碼吧（主要是後臺邏輯）。
前端代碼：

//併發上傳（多線程上傳） var uploader = WebUploader.create({ //兼容老版本IE swf: '/Scripts/webuploader-0.1.5/Uploader.swf', // 文件接收服務端。 server: '/Webuploader/SveFile3', // 開起分片上傳。 chunked: true, //分片大小 chunkSize: 1000000, //上傳併發數 threads: 10, // 選擇文件的按鈕。 pick: '#picker' }); // 點擊觸發上傳 $("#ctlBtn").click(function () { uploader.upload(); }); uploader.on('uploadSuccess', function (file) { //上傳完成後，給後臺發送一個合併文件的命令 $.ajax({ url: "/Webuploader/FileMerge", data: { "fileName": file.name }, type: "post", success: function () { alert("上傳成功"); } }); });

後臺代碼：

public string SveFile3() { var chunk = Request.Form["chunk"];//當前是第多少片 var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(Request.Files if (!Directory.Exists(path))//判斷是否存在此路徑，若是不存在則建立 { Directory.CreateDirectory(path); } //保存文件到根目錄 App_Data + 獲取文件名稱和格式 var filePath = path + "/" + chunk; //建立一個追加（FileMode.Append）方式的文件流 using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) { using (BinaryWriter bw = new BinaryWriter(fs)) { //讀取文件流 BinaryReader br = new BinaryReader(Request.Files[0].InputStream); //將文件留轉成字節數組 byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length); //將字節數組追加到文件 bw.Write(bytes); } } return "保存成功"; }

/// <summary> /// 合併文件 /// </summary> /// <param name="path"></param> /// <returns></returns> public bool FileMerge() { var fileName = Request.Form["fileName"]; var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(fileName); //這裏排序必定要正確，轉成數字後排序（字符串會按1 10 11排序，默認10比2小） foreach (var filePath in Directory.GetFiles(path).OrderBy(t => int.Parse(Path.GetFileNameWithoutExtension(t)))) { using (FileStream fs = new FileStream(Server.MapPath("~/App_Data/") + fileName, FileMode.Append, FileAccess.Write)) { byte[] bytes = System.IO.File.ReadAllBytes(filePath);//讀取文件到字節數組 fs.Write(bytes, 0, bytes.Length);//寫入文件 } System.IO.File.Delete(filePath); } Directory.Delete(path); return true; }

到這裏你覺得就結束了嗎？錯，還有好多狀況沒有考慮到。若是多個用戶上傳的文件名字同樣會怎樣？如何實現斷點續傳？還沒實現選擇多個文件？不過，這裏不打算繼續貼代碼了（再貼下去，代碼量愈來愈多了），本身也來練習練習吧。
提供一個思路，上傳前先往數據庫插入一條數據。數據包含文件要存的路徑、文件名（用GUID命名，防止同名文件衝突）、文件MD5（用來識別下次續傳和秒傳）、臨時文件塊存放路徑、文件是否完整上傳成功等信息。
而後若是咱們斷網後再傳，首先獲取文件MD5值，看數據庫裏面有沒上傳完成的文件，若是有就實現秒傳。若是沒有，看是否是有上傳了部分的。若是有接着傳，若是沒有則從新傳一個新的文件。

總結

以前我一直很疑惑，爲何上傳文件必定要用form包起來，如今算是大概明白了。
最開始在javascript還不流行時，咱們就能夠直接使用submit按鈕提交表單數據了。表單裏面能夠包含文字和文件。而後隨着js和ajax的流行，能夠利用ajax直接異步提交部分表單數據。這裏開始我就糾結了，爲何ajax能夠提交本身組裝的數據。那爲何不能直接提交文件呢。這裏我錯了，ajax提交的並非隨意的數據，最後仍是組裝成了表單格式（由於後臺技術對錶單格式數據的支持比較普及）。可是現有的技術還不能經過js組裝一個文件格式的表單數據。直到H5中的FormData出現，讓前端js組裝一個包含文件的表單格式數據成爲了可能。因此說表單只是爲了知足和後臺「約定」的數據格式而已。