1. 程式人生 > >【轉】文件各種上傳,離不開的表單

【轉】文件各種上傳,離不開的表單

dal 不變 沒有 each post str 線程 order bmi

閱讀目錄

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

利用表單實現文件上傳

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

//方式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.jsjquery.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="~/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組裝一個包含文件的表單格式數據成為了可能。所以說表單只是為了滿足和後臺“約定”的數據格式而已。

相關推薦

  • http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html
  • http://javascript.ruanyifeng.com/htmlapi/file.html

demo

  • https://github.com/zhaopeiym/BlogDemoCode/tree/master/上傳下載

轉自:http://www.cnblogs.com/zhaopei/p/upload.html

【轉】文件各種上傳,離不開的表單