文件各種上傳，離不開的表單

閱讀目錄

• 
  

  利用表單實現文件上傳



• 
  

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



• 
  

  模擬表單數據上傳（FormData）



• 
  

  分片上傳



• 
  

  使用HTML5 拖拽、粘貼上傳



• 
  

  上傳插件（WebUploader）



• 
  

  總結

作為程序員的我們，經常會要用到文件的上傳和下載功能。到了需要用的時候，各種查資料。有木有..有木有...。為了方便下次使用，這裡來做個總結和備忘。

利用表單實現文件上傳

最原始、最簡單、最粗暴的文件上傳。

前端代碼：

//方式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>

【注意】

• 
  

  1、需要post提交



• 
  

  2、enctype="multipart/form-data" （傳輸文件）



• 
  

  3、需要提交的表單元素需要設置 name 屬性

後台代碼：

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

前端代碼：

<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);
           }
       });
   });
});

後台代碼：

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 才有的。下面我們自己也來試試把。

前端代碼：

<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);
       }
   });
});

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

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="http://img.ifuun.com/getimg.php?url=~/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組裝一個包含文件的表單格式數據成為了可能。所以說表單只是為了滿足和後台「約定」的數據格式而已。

via：http://www.cnblogs.com/zhaopei/p/upload.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！