整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

          讀目錄

          • 利用表單實現文件上傳
          • 表單異步上傳(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.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',
          
                  // 選擇文件的按鈕??蛇x。
                  // 內部根據當前運行是創建,可能是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/上傳下載

          學,演示等場合下我們都使用PPT演示文件。但PPT格式文件也有一定的缺點,如可隨便被人修改,在跨平臺使用上不是很方便等。相比這下,Flash就沒有這方面的問題,而且,Flash還能方便的直接嵌入網頁、郵件中展示,讓創意,方案等可以直接在網站和郵件上與人共享,同時單文件也方便網絡傳輸。isping powerpoint to slash converten這個免費軟件就能幫助你將PPT文件轉換為flash文件。

          首先下載ispring 的免費版本并進行安裝。ispring是以powerpoint插件的方式工作的,安裝成功后啟動powerpoint將會發現powerpoint上新增加 了一個ispring Converter的選項卡。里面的工具欄很簡潔,只有五個按鈕。通過直接點擊inser flash按鈕,還可以在你的powerpoint文件中快速插入swf格式的flash文件,讓你的演示文稿更加生動。

          打開要轉換為flash格式的ppt文件,然后再點擊quick publish,ispring就會將當前的PPT文件按默認配置快速轉換為flash格式,并彈出一個信息框顯示轉換進度。轉換成功后會自己打開相應的輸出文件夾并自動播放轉換好的flash文件。轉換的效果不用擔心,轉換后幻燈片的各種切換效果和鏈接都能完整的保留下來,幻燈片里的音頻和視頻文件也會乍動嵌入到flash文件里去,文件的體積也有一定的減小。若是通過點擊publish按鈕來轉換,則在轉換前ispring會彈出一個對話框讓你詳細設置轉換選項。如果指定保存生成flash的文件夾或發布到sildeboom網站上,轉換全部片還是當前幻燈片,是否生成相應的html網頁和循環播放,背景色和時間間隔等。

          <html>
          	<head> 
          		標題 ---此處放置標題、導航、登錄等內容
          		<!此處放置標題、導航、登錄等內容--->
          	</head>
          	<body> 
          		<!此處放置頁面主要內容--->
          		<! :空格
          		<: 小于號
          		>: 大于號
          		": 引號--->
          		<p>第一段 世界大勢,合久必分,分久必合。</p>
          		<hr/> <!表示單行橫線顯示--->
          		<br/> <!表示換行--->
          		<h1> hello world, html is easy</h1>
          		<h2> hello world, html is easy</h2>
          		<h3> hello world, html is easy</h3>
          		<h4> hello world, html is easy</h4>
          		<h5> hello world, html is easy</h5>
          		<h6> hello world, html is easy</h6>
          		<p>普通字體</p>
          		<b>粗體</b> <i>斜體</i> <del>本文字已被刪除,請忽略</del>
          		
          		<p> hello     world</p>  <!段落標記--->
          		<a href="http://www.baidu.com" target="_self"> 點擊進入百度</a>
          		<br/>
          		<img src="http://mysite.com/mypic.png" alt="網站作者照片">
          		<h3> 普通無邊框表格:</h3>
          		<table>
          		<tr>
          			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
          		</tr>
          		<tr>
          			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
          		</tr>
          		</table>
          		
          		<h3>帶表頭,有邊框,有跨列單元:</h3>
          		<table border="1">
          		<tr>
          			<th>head1</th> <th>head2</th> <th>head3</th>
          		</tr>
          		<tr>
          			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
          		</tr>
          		<tr>
          			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
          		</tr>
          		</table>
          		
          		<h3>三種列表的表達方式:</h3>
          		<table cellpadding="2" cellspacing="2">
          		<tr>
          			<td>
          				<ul><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ul>
          			</td>
          			<td>
          				<ol><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ol>
          			</td>
          		</tr>
          		</table>
          		<dl>
          			<dt>CPU</dt><dd>處理器</dd>
          			<dt>MEM</dt><dd>內存</dd>
          		</dl>
          		
          		<body bgcolor="#FF0000">
          		<body bgcolor="RGB(255,0,0)">
          		<body bgcolor="RED">
          		
          		<p>視頻</p>
          		<object
          			classid="clsid:d27sfsfstqwetsasasdfsdfs"
          			codebase="http://fpdownload.macromedia.com/pub/shckwave/cabs/flash/swflash.cab">
          			<embed src="flashfile.swf" width="300" height="200"></embed>
          		</object>
          		<br/>
          		
          		<p>音頻</p>
          		<audio controls="crontrols">
          			<source src="sample_song.mp3" type="audio/mp3" />
          		</audio>
          		
          		<br/>
          		<p>視頻</p>
          		<video controls="controls"/>
          			<source src="sample_video.mp4" type="video/mp4">
          		</video>
          		
          	    <p>html表單---文本輸入</p>
          		<table>
          			<tr>
          				<td>用戶名:</td>
          				<td><input type="text" name="name"></td>
          				<td>密碼:</td>
          				<td><input type="password" name="pass"></td>
          			</tr>
          			<tr>
          			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
          			</tr>
          		</table>
          		
          		<table>
          			<tr>
          				<td>性別:</td>
          				<td>用戶名:</td>
          				<td>男性<input type="radio" checked='checked' name="sex" value="male" /></td>
          				<td>女性<input type="radio" checked='checked' value="female" /></td>
          			</tr>
          			<tr>
          			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
          			</tr>
          		</table>
          		
          	</body>
          
          </html>
          


          主站蜘蛛池模板: 波多野结衣在线观看一区二区三区| 高清一区二区三区| 国产一区二区三区高清在线观看| 中文字幕色AV一区二区三区| 无码精品一区二区三区| 变态拳头交视频一区二区| 亚洲av无码一区二区乱子伦as | 亚洲V无码一区二区三区四区观看| 亚洲国产欧美日韩精品一区二区三区 | 久久国产精品一区| 国产精品综合一区二区| 精品国产一区二区三区香蕉事| 精品福利一区二区三| 国模少妇一区二区三区| 久久精品视频一区| 精品视频无码一区二区三区| 日韩人妻无码一区二区三区| 亚洲国产成人久久综合一区77| 国产日韩精品一区二区在线观看播放| 国产精品无码AV一区二区三区| 日本国产一区二区三区在线观看| 中文字幕一区二区三| 无码人妻精品一区二区| 午夜AV内射一区二区三区红桃视| 国内精品视频一区二区八戒| 国产精品被窝福利一区 | 亚洲性日韩精品国产一区二区| 中文字幕精品无码一区二区三区| 亚洲熟妇av一区| 无码精品久久一区二区三区| 久久综合九九亚洲一区| 日本一区二区三区久久| 熟妇人妻AV无码一区二区三区| 日韩精品一区二区三区国语自制| 福利一区福利二区| 国产在线乱子伦一区二区| 精品国产不卡一区二区三区| 亚洲愉拍一区二区三区| 国产午夜毛片一区二区三区| 亚洲一区二区三区在线网站 | 无码国产精品一区二区免费16|