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

讀目錄

利用表單實現文件上傳
表單異步上傳（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="~/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/上傳下載

用過Delphi的程序員，對Form這個詞應該比較熟悉。在Delphi中，Form被翻譯為“窗體、窗口”，作用是：為用戶提供界面，供用戶輸入信息，向用戶展示處理結果。

HTML5中也有Form，功能與Delphi中的Form差不多，用于接收用戶輸入，和服務器進行交互。不過HTML5中的Form，中文一般譯為“表單”。

1、Web前端與Web后端的交互

Web前端，指瀏覽器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript腳本。

Web后端，指運行在服務器上的，為Web前端提供服務的軟件，Web后端也常常被稱為Web服務器。

在HTML5中，Web前端與Web后端交互的流程一般如下：

（1）Web前端向Web后端發起HTTP請求；

（2）Web后端收到HTTP請求后，進行業務處理；

（3）Web后端向Web前端返回HTTP響應。

到目前為止，我們在HTML5中碰到的Web前端發起HTTP請求的方式有兩種：

第1種：HTML頁面通過<a>元素向用戶提供超級鏈接，用戶點擊該鏈接時，會向服務器發起請求；

第2種：HTML頁面通過表單為用戶提供輸入界面，用戶提交表單時，會向服務器發起請求。

2、GET請求和POST請求

HTTP請求有八種，對Web前端開發者來說，最常用的是GET請求和POST請求。

GET請求：向Web后端請求指定的頁面；GET請求攜帶的數據，以URL參數的形式提供；

POST請求：向Web后端提交數據，請求Web后端對數據進行處理；POST請求攜帶的數據，在請求消息體中提供。

在HTML5中，用戶點擊鏈接地址，Web前端向后端發起GET請求；

在HTML5中，用戶提交表單，Web前端可以向后端發起GET請求，也可以發起POST請求。

說明：由于目前沒有和后端服務器對接，為了便于對表單設計進行展示，下面的例子HTML文檔，都是用GET請求來提交數據。

3、表單的主要元素

<form>元素：表示表單；

<input>元素：表單中的輸入控件，輸入控件可以是文本框、單選框、復選框、按鈕等等；

<label>元素：表單中的標簽控件；

<button>元素：表單中的按鈕控件；

<select>與<option>元素：用于實現列表框和下拉菜單；

<textarea>元素：多行文本控件。

4、表單提交文本框的輸入

下面是一個可以提交文本框輸入的HTML文檔：

<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請輸入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，展示效果如下：

我們可以在文本框中輸入信息，例如輸入tom：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下；

可以看到，數據被提交給process.html頁面，并且附帶了一個參數name，且值為我們輸入的tom。

5、表單提交用戶對單選框的選擇

下面是一個可以提交單選框被選信息的HTML文檔：

<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性別：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>國籍：</label>
<br/>
中國：<input type="radio" name="nationality" value="Chinese" /> <br/>
美國：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英國：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以選擇性別和國籍，例如我們選擇“男”和“中國”：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了gender參數的值為male，nationality參數的值為Chinese。

6、表單提交用戶對復選框的選擇

下面是一個可以提交復選框被選信息的HTML文檔；

<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的業余愛好：</label>
<br/>
美術：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
廚藝：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以選擇自己的業余愛好，例如我們選擇足球、唱歌、廚藝：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了三個hobby參數，其值分別為Football，Singing和Cook。

7、表單提交用戶對下拉菜單的選擇

下面是一個可以提交下拉菜單被選信息的HTML文檔；

<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的學歷：</label>
<br/>
<select name="education">
<option value="primary_school">小學</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大學</option>
</select>
<br/><br/>
<label>請選擇您的興趣愛好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美術</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">廚藝</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以單選我們的學歷，也可以通過按下Shift+鼠標鍵多選我們的興趣。例如我們選擇“初中”學歷，選擇“美術”和“廚藝”兩項愛好：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了education參數和兩個hobby參數，education的值為junior_high_school，hobby的值為Art和Cook。

上面列舉了幾種控件的HTML5表單設計方法，其它的控件也大概差不多，把多個控件組合在同一個<form>元素中的方法也是相同的，這里就不再贅述了。

單

表單是搜集用戶數據信息的各種表單元素的集合，作用是實現網頁上的數據交互。

django的表單功能是由Form類實現，主要分為兩種，django.forms.Form(基礎功能) 和django.forms.ModelForm（在django.forms.Form的基礎上結合模型所生成的數據表單).

HTML表單

在HTML中，表單是在 <form>...</form> 中的一些元素，它允許訪客做一些類似輸入文本、選擇選項、操作對象或空間等動作，然后發送這些信息到服務端。

一些表單界面元素（文本框或復選框）非常簡單并內置在HTML中。其他會復雜些；像彈出日期選擇或者允許您移動滑塊或者操作控件，一般通過使用JavaScript，CSS以及HTML表單中的 <input> 元素來實現這些效果。

和它的元素 <input> 一樣，表單必須指定兩樣東西：

何地：負責響應用戶輸入數據的URL地址

如何：數據請求使用的HTTP方法。

例如，Django admin的登錄表單包含了一些 <input> 元素：用戶名用 type="text" ，密碼用 type="password" ，登錄按鈕用 type="submit" 。它還包含一些用戶看不到的隱藏文本字段，Django用它們來決定下一步行為。

它還告訴瀏覽器表單數據應該發往 <form> 的 action 屬性指定的URL—— /admin/ ，并且應該使用它的 method 屬性指定的HTTP方法—— post 。

當 <input type="submit" value="Log in"> 元素被觸發的時候，數據會發送到 /admin/ 。

GET 和 POST

處理表單時只會用到 GET

和 POST 兩種HTTP方法。

Django的登錄表單使用 POST 方法傳輸數據，在這個方法中瀏覽器會封裝表單數據，為了傳輸會進行編碼，然后發送到服務端并接收它的響應。

相比之下，GET 方法將提交的數據捆綁到一個字符串中，并用它來組成一個URL。該URL包含了數據要發送的地址以及一些鍵值對應的數據。如果您在Django文檔中進行一次搜索，就會看到這點，它會生成一個形似 https://docs.djangoproject.com/search/?q=forms&release=1 的URL。

GET 和 POST 通常用于不同的目的。

任何可能用于更改系統狀態的請求應該使用 POST —— 比如一個更改數據庫的請求。GET 應該只被用于不會影響系統狀態的請求。

GET 方法也不適合密碼表單，因為密碼會出現在URL中，于是也會出現在瀏覽器的歷史記錄以及服務器的日志中，而且都是以純文本的形式。它也不適合處理大量的數據或者二進制數據，比如一張圖片。在WEB應用的管理表單中使用 GET 請求具有安全隱患：攻擊者很容易通過模擬請求來訪問系統的敏感數據。 POST 方法通過與其他像Django的 CSRF protection 這樣的保護措施配合使用，能對訪問提供更多的控制。

另一方面， GET 方法適用于諸如網頁搜索表單這樣的內容，因為這類呈現為一個 GET 請求的URL很容易被存為書簽、分享或重新提交。

在線咨詢

上一篇：HTML5創作工具MAKA 試用體驗
下一篇：前端筆記（圖像、網頁灰度處理 react多頁應用開發

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

讀目錄

利用表單實現文件上傳

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

模擬表單數據上傳（FormData）

分片上傳

使用HTML5 拖拽、粘貼上傳

上傳插件（WebUploader）

總結

1、Web前端與Web后端的交互

2、GET請求和POST請求

3、表單的主要元素

4、表單提交文本框的輸入

5、表單提交用戶對單選框的選擇

6、表單提交用戶對復選框的選擇

7、表單提交用戶對下拉菜單的選擇

HTML表單

GET 和 POST

您的項目需求