【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放

本文轉載自查看原文 2013-04-16 23:04 3041 HTML5&CSS3

HTML中與form有關的東東

新增屬性	個人理解
form	html5之前，表單內的從屬元素需要放入標簽中，現在可以為標簽指定form標簽即可點評：該功能解決了我們實際中遇到的一些問題，比如iframe模擬異步圖片上傳時，就必須將圖片寫到form外。
formaction formmethod	該屬性用於按鈕（submit）讓表單提交頁面可又按鈕控制 formmethod指定各按鈕提交方式
placehoder	該屬性非常有用，用於文本框中顯示提示信息，非常有用的一屬性
list	list屬性需要與datalist一同使用，相當於文本框，模擬select，非常適用的一個屬性
autofocus	用於文本框主動獲取焦點，有用的東東
新增input屬性，解放驗證，各瀏覽器支持不好
tel	用於電話
url	驗證url
email	驗證郵箱
date/time	日期類驗證，會出現日期選擇插件哦。。。
number	只能是數字
range	控制數字范圍
color	顏色選擇器，好東西啊。。。

HTML5中增加了很多與form有關的屬性，說實在的，這些東西真心貼心啊！！！很大程度上講：

完全解放表單驗證

若不是考慮兼容性問題，老夫恨不得立即投入其中，但一旦想起兼容性問題的話，你就會非常頭疼！！！

因為原本很好的東西，卻是因為歷史的原因，反而會增加我們的工作量！！！

在錯的時間，做對的事情，他看起來是對的，實際上也是對的。。。但你會發現，他錯了。。。。

增強頁面元素

項目	個人理解
figure/figcaption	據說表示頁面獨立內容，移除后無影響，暫無發現用處..
details	該標簽有點意思，用於替代js中，元素收起展開功能。最新ff都不支持……個人覺得，既然提供了該標簽應該提供屬性表示上下展開或者左右展開；
mark	高亮顯示，當真語義化
progress	屌絲們，可以告別gif圖片了，也不用div模擬百分比了，與windows區域一致的進度條出現啦，異步文件上傳更加完善！
改良ol	老夫就沒有用過這個主。。。
……

以上元素屬於可有可無的元素，不必贅述，接下來，本文明星對象登場：

文件API

FileList與file對象：

在html4中，file標簽只允許選擇一個文件，但html5中，對file標簽設置multiple屬性后，變可以選擇多文件了！！！

而，選擇后便會形成這里的filelist對象，即一個個file組成的對象列表，簡單來說就是file數組。

file對象具有2屬性，name代表文件名（不包括路徑），lastModifiedDate表示最后修改時間

其實我們在html4中操作file時，可以獲取本地很多屬性，比如文件大小，但是萬惡的ie不支持，到ie9后才有所好轉。

所以想客戶端提示文件上傳過大的同學放棄吧。。。

Blob對象

表示二進制原始數據，提供一slice方法訪問字節內部原始數據；size表示blob對象字節長度、type表示其mime類型，類型未知則返回空字符串。

來來，簡單做一實驗：

關於File

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             $('#wl').click(function () {
 9                 var f = $('#file')[0];
10 
11                 var s = '';
12 
13             });
14         });
15     </script>
16 </head>
17 <body>
18     <input type="file" id="file" multiple />
19     <button id="wl">
20         文件上傳</button>
21 </body>
22 </html>

我們在ff中選擇圖片后，提交，設個斷點看看：

file主角登場，就是他了，我們將之屬性輸出來看看：

真的是應有盡有啊！有了該屬性就可以做很多事情了，但是。。。我們來看看ie7、8：

各位觀眾，人家壓根沒這個屬性，所以一切百搭。。。

話說，我覺得ie瀏覽器調試起來很痛苦，請問各位大神有沒有什么好的ie開發插件，就像ff的firebug，google自帶的插件？？

FIleReader接口

filereader接口，可將文件讀入內存，有了這個東東我們就可以很舒服的做圖片預覽了，但他的公用不止如此。

filereader的四個方法：

readAsBinaryString 將文件讀取為二進制碼——通常我們將數據傳給后端；

readAsText 將文件讀取為文本——讀取文本內容；

readAsURL 將文件讀取為DataURL——一般是小文件，圖片或者html；

abort 中斷讀取，因為文件過大等待時間就很長了

filereader接口事件：

onabort 讀取中斷觸發；

onerror 讀取失敗觸發；

onloadstart 開始讀取時觸發；

onprogress 讀取中

onload 讀取成功時觸發；

onloadend 讀取完成后觸發，無論成功失敗；

光說不練不行，我們這里做個小實驗：

我是一個小實驗

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             var bt = $('#wl');
 9             var file = $('#file');
10             var type = $('#type');
11             var result = $('#result');
12 
13             var func = {};
14             func.readAsDataURL = function (file) {
15                 //驗證是否為圖片
16                 if (!/image\/\w+/.test(file.type)) {
17                     alert('非圖片格式');
18                     return false;
19                 }
20                 var reader = new FileReader();
21                 reader.readAsDataURL(file);
22                 reader.onload = function (e) {
23                     result.html('<img src="' + this.result + '"/>');
24                 }
25             }
26 
27             func.readAsBinaryString = function (file) {
28                
29                 var reader = new FileReader();
30                 reader.readAsBinaryString(file);
31                 reader.onload = function (e) {
32                     result.html(this.result);
33                 }
34             }
35 
36             func.readAsText = function (file) {
37               
38                 var reader = new FileReader();
39                 reader.readAsText(file);
40                 reader.onload = function (e) {
41                     result.html(this.result);
42                 }
43             }
44 
45             bt.click(function () {
46                 if (func[type.val()] && typeof func[type.val()] == 'function') {
47                     func[type.val()](file[0].files[0]);
48                 }
49             });
50 
51         });
52     </script>
53 </head>
54 <body>
55     <div id="result">
56     </div>
57     <input type="file" id="file" multiple />
58     <select id="type">
59         <option value="readAsDataURL">readAsDataURL</option>
60         <option value="readAsBinaryString">readAsBinaryString</option>
61         <option value="readAsText">readAsText</option>
62     </select>
63     <button id="wl">
64         讀取文件</button>
65 
66 </body>
67 </html>

用最新瀏覽器運行試試呢！

我們再做一個判斷，看看其事件執行順序：

　　　　　 reader.onload = function (e) {
                    alert('onload');
                }
                reader.onprogress = function (e) {
                    alert('onprogress');
                }
                reader.onerror = function (e) {
                    alert('onerror');
                }
                reader.onloadstart = function (e) {
                    alert('onloadstart');
                }
                reader.onloaded = function (e) {
                    alert('onloaded');
                }

此處具體應用：

簡單圖片上傳

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6      body{ font-size: 14px;}
  7     .image_upload{ margin:10px; border: 1px solid #E0E0E0; text-align: center; padding:5px; display: inline-block; position: relative; }
  8     .image_upload img{ max-height: 150px; max-width: 150px; }
  9     .image_upload .rate { position: absolute; top: 6px; left: 6px; padding: 0 5px; color: White; background: black; border-radius: 5px;  filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }
 10    .image_upload .delete { background: url("images/del.png") no-repeat scroll 0 0 transparent; cursor: pointer; height: 16px; position: absolute; right: -6px; top: -6px; width: 16px;}
 11    
 12     </style>
 13     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
 14     <script type="text/javascript">
 15         $(document).ready(function () {
 16             var j_bt_sub = $('#submitForm'),
 17                 j_form = $('#form'),
 18                 j_state = $('#upState'),
 19                 j_file = $('#files');
 20             var is_support = true; //判斷是否支持高級特性，經測試若是不支持filereader與file
 21             if (typeof FileReader === 'undefined') is_support = false;
 22 
 23             j_file.change(function () {
 24                 var file = j_file.get(0);
 25                 if (!file.files[0]) is_support = false;
 26 
 27                 //支持高級功能的瀏覽器
 28                 if (is_support) {
 29                     files = file.files;
 30                     for (var k = 0, len = files.length; k < len; k++) {
 31                         var file = files[k];
 32                         var reader = new FileReader();
 33                         reader.readAsDataURL(file);
 34                         (function (k) {
 35                             reader.onloadend = function (e) {
 36                                 if (reader.error) {
 37                                     alert(reader.error);
 38                                 } else {
 39                                     var up = $('<div class="image_upload" id="up_' + k + '"></div>');
 40                                     var img = $('<img src="' + this.result + '" alt="" id="img_' + k + '">');
 41                                     var rate = $('<div class="rate" id="rate_' + k + '">0%</div>');
 42                                     var del = $('<div class="delete" title="刪除" id="del_' + k + '"></div>');
 43                                     up.append(img);
 44                                     up.append(rate);
 45                                     up.append(del);
 46                                     del.click(function () {
 47                                         $(this).parent().remove();
 48                                     });
 49                                     j_state.append(up);
 50                                 }
 51                             };
 52                         })(k);
 53                     } //for
 54                 } else {
 55                     //不支持的話采用傳統方式
 56                 }
 57             });
 58 
 59             //此處應該支持平滑后退，后面考慮
 60             j_bt_sub.click(function (e) {
 61                 if (is_support) {
 62                     var file = j_file.get(0);
 63                     files = file.files;
 64                     for (var k = 0, len = files.length; k < len; k++) {
 65                         var file = files[k];
 66                         upload(file, k);
 67                     }
 68                 }
 69             });
 70 
 71             function upload(file, k) {
 72 
 73                 var up = $('#up_' + k);
 74                 var img = $('#img_' + k);
 75                 var rate = $('#rate_' + k);
 76                 var del = $('#del_' + k);
 77 
 78                 var fd = new FormData();
 79                 fd.append('upload', file);
 80                 var xhr = new XMLHttpRequest();
 81                 xhr.upload.addEventListener('progress', function (e) {
 82                     var percentComplete = Math.round((e.loaded) * 100 / e.total);
 83                     rate.html(percentComplete.toString() + '%');
 84                 }, false);
 85                 // 文件上傳成功或是失敗
 86                 xhr.onreadystatechange = function (e) {
 87                     if (xhr.readyState == 4) {
 88                         if (xhr.status == 200) {
 89                             rate.html('100%');
 90                             var url = xhr.responseText;
 91                             img.attr('src', url);
 92                             var s = '';
 93                         }
 94                     }
 95                 };
 96                 xhr.open("POST", "fileUpload.ashx");
 97                 //發送            
 98                 xhr.send(fd);
 99             }
100 
101         });    
102     </script>
103 </head>
104 <body>
105     <div id="upState"></div>
106     <form id="uploadForm" action="fileUpload.ashx" method="post" enctype="multipart/form-data">
107     <input id="files" type="file" size="30" name="file[]" multiple />
108     <button type="button" id="submitForm">上傳圖片</button>
109     </form>
110 </body>
111 </html>

此處暫時告一段落，若是想看更復雜一點的應用，請猛擊，記得頂喲：
http://www.cnblogs.com/yexiaochai/archive/2013/04/11/3014404.html

拖放API

其實之前，我還用jquery寫了個拖放的插件呢。。

工作中碰到的一些東西【彈出窗口】【拖放】【異步文件上傳】

但是集成在HTML5中當然更好！！！我們現在來看看這個東東。。。並且它的強大之處，就是不止在瀏覽器中拖動，這就不得了了哦（拖動圖片上傳）

html5中默認對圖片、鏈接可以拖放，其它元素需要設置draggable="true"才能拖放，事不宜遲，老夫馬上去試試。

拖放的例子

 1 <!DOCTYPE html>
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     
 7 </head>
 8 <body>
 9 <div id="dragme" draggable="true" style=" width: 200px; border: 1px solid gray;">請拖放</div>
10 <div id="text" style=" width: 200px; height: 200px; border: 1px solid gray;"></div>
11 <script type="text/javascript">
12     document.ondragover = function (e) {
13         e.preventDefault();
14     };
15     document.ondrop = function (e) {
16         e.preventDefault();
17     };
18 
19     var source = document.getElementById('dragme');
20     var dest = document.getElementById('text');
21     source.addEventListener('dragstart', function (e) {
22         var dt = e.dataTransfer;
23         dt.setData('text/plain', '您好' + new Date());
24     }, false);
25 
26     dest.addEventListener('dragend', function (e) {
27         e.preventDefault();
28     }, false);
29 
30     dest.addEventListener('drop', function (e) {
31         var dt = e.dataTransfer;
32         var text = dt.getData('text/plain');
33         dest.innerHTML += text;
34         e.stopPropagation();
35         e.preventDefault();
36         return false;
37     }, false);
38     
39     </script>
40 </body>
41 </html>

拖放時候一定要記住，阻止頁面默認行為，否則會打開新窗口的，其中以下亦是重點：

1 拖放可使用DataTransfer傳遞數據，該對象是非常有用的，因為在拖動目標元素時，可能會經過其它元素，我們可以用此傳遞信息；

API：

dragstart 被拖放元素開始拖放時

drag 被拖放元素拖放過程中

dragenter 拖放過程中鼠標經過的元素被拖放元素開始進入本元素時

dragover 拖放過程中鼠標經過的元素本元素內移動

drageleave 拖放過程中鼠標經過的元素離開本元素

drop 拖放的目標元素拖動的元素放到了本元素中

dragend 拖放的對象拖放結束

其實這里是有問題的，我並未去深入研究從開始拖動到經過各種元素會產生神馬情況，這個可以作為二次學習時的重點研究對象。

結語

html5的文件和表單做的比較精致，個人感覺比布局新增的幾個標簽有用多了，明天開始學習canvas，雖然不懂，雖然見過，但是還是感覺很厲害的樣子！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 4 django系列之HTML通過form標簽來同時提交表單內容與上傳文件 HTML5表單_form HTML的