bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

HTML5form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法

HTML5 form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

10年的和政網站建設經驗，針對設計、前端、開發、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網營銷的優勢是能夠根據用戶設備顯示端的尺寸不同，自動調整和政建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優雅布局與設計，從而大程度地提升瀏覽體驗。創新互聯建站從事“和政網站設計”,“和政網站推廣”以來，每個客戶項目都認真落實執行。

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#wl').click(function () {
                var f = $('#file')[0];

                var s = '';

            });
        });
    </script>
</head>
<body>
    <input type="file" id="file" multiple />
    <button id="wl">
        文件上傳</button>
</body>
</html>

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

HTML5 form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法

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

HTML5 form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法

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

HTML5 form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法

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

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

FIleReader接口

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

filereader的四個方法：

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

readAsText 將文件讀取為文本&mdash;&mdash;讀取文本內容；

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

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

filereader接口事件：

onabort 讀取中斷觸發；

onerror 讀取失敗觸發；

onloadstart 開始讀取時觸發；

onprogress 讀取中

onload 讀取成功時觸發；

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

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

代碼如下:


我是一個小實驗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var bt = $('#wl');
            var file = $('#file');
            var type = $('#type');
            var result = $('#result');

            var func = {};
            func.readAsDataURL = function (file) {
                //驗證是否為圖片
                if (!/image\/\w+/.test(file.type)) {
                    alert('非圖片格式');
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    result.html('<img src="' + this.result + '"/>');
                }
            }

            func.readAsBinaryString = function (file) {
               
                var reader = new FileReader();
                reader.readAsBinaryString(file);
                reader.onload = function (e) {
                    result.html(this.result);
                }
            }

            func.readAsText = function (file) {
             
                var reader = new FileReader();
                reader.readAsText(file);
                reader.onload = function (e) {
                    result.html(this.result);
                }
            }

            bt.click(function () {
                if (func[type.val()] && typeof func[type.val()] == 'function') {
                    func[type.val()](file[0].files[0]);
                }
            });

        });
    </script>
</head>
<body>
    <div id="result">
    </div>
    <input type="file" id="file" multiple />
    <select id="type">
        <option value="readAsDataURL">readAsDataURL</option>
        <option value="readAsBinaryString">readAsBinaryString</option>
        <option value="readAsText">readAsText</option>
    </select>
    <button id="wl">
        讀取文件</button>

</body>
</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');
                }

此處具體應用：
HTML5 form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法

代碼如下:


簡單圖片上傳
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
     body{ font-size: 14px;}
    .image_upload{ margin:10px; border: 1px solid #E0E0E0; text-align: center; padding:5px; display: inline-block; position: relative; }
    .image_upload img{ max-height: 150px; max-width: 150px; }
    .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; }
   .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;}
   
    </style>
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var j_bt_sub = $('#submitForm'),
                j_form = $('#form'),
                j_state = $('#upState'),
                j_file = $('#files');
            var is_support = true; //判斷是否支持高級特性，經測試若是不支持filereader與file
            if (typeof FileReader === 'undefined') is_support = false;

            j_file.change(function () {
                var file = j_file.get(0);
                if (!file.files[0]) is_support = false;

                //支持高級功能的瀏覽器
                if (is_support) {
                    files = file.files;
                    for (var k = 0, len = files.length; k < len; k++) {
                        var file = files[k];
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        (function (k) {
                            reader.onloadend = function (e) {
                                if (reader.error) {
                                    alert(reader.error);
                                } else {
                                    var up = $('<div class="image_upload" id="up_' + k + '"></div>');
                                    var img = $('<img src="' + this.result + '" alt="" id="img_' + k + '">');
                                    var rate = $('<div class="rate" id="rate_' + k + '">0%</div>');
                                    var del = $('<div class="delete" title="刪除" id="del_' + k + '"></div>');
                                    up.append(img);
                                    up.append(rate);
                                    up.append(del);
                                    del.click(function () {
                                        $(this).parent().remove();
                                    });
                                    j_state.append(up);
                                }
                            };
                        })(k);
                    } //for
                } else {
                    //不支持的話采用傳統方式
                }
            });

            //此處應該支持平滑后退，后面考慮
            j_bt_sub.click(function (e) {
                if (is_support) {
                    var file = j_file.get(0);
                    files = file.files;
                    for (var k = 0, len = files.length; k < len; k++) {
                        var file = files[k];
                        upload(file, k);
                    }
                }
            });

            function upload(file, k) {

                var up = $('#up_' + k);
                var img = $('#img_' + k);
                var rate = $('#rate_' + k);
                var del = $('#del_' + k);

                var fd = new FormData();
                fd.append('upload', file);
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    var percentComplete = Math.round((e.loaded) * 100 / e.total);
                    rate.html(percentComplete.toString() + '%');
                }, false);
                // 文件上傳成功或是失敗
                xhr.onreadystatechange = function (e) {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            rate.html('100%');
                            var url = xhr.responseText;
                            img.attr('src', url);
                            var s = '';
                        }
                    }
                };
                xhr.open("POST", "fileUpload.ashx");
                //發送            
                xhr.send(fd);
            }

        });    
    </script>
</head>
<body>
    <div id="upState"></div>
    <form id="uploadForm" action="fileUpload.ashx" method="post" enctype="multipart/form-data">
    <input id="files" type="file" size="30" name="file[]" multiple />
    <button type="button" id="submitForm">上傳圖片</button>
    </form>
</body>
</html>


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

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

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

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

代碼如下:


<strong>拖放的例子
</strong> <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   
</head>
<body>
<div id="dragme" draggable="true" >請拖放</div>
<div id="text" ></div>
<script type="text/javascript">
    document.ondragover = function (e) {
        e.preventDefault();
    };
    document.ondrop = function (e) {
        e.preventDefault();
    };

    var source = document.getElementById('dragme');
    var dest = document.getElementById('text');
    source.addEventListener('dragstart', function (e) {
        var dt = e.dataTransfer;
        dt.setData('text/plain', '您好' + new Date());
    }, false);

    dest.addEventListener('dragend', function (e) {
        e.preventDefault();
    }, false);

    dest.addEventListener('drop', function (e) {
        var dt = e.dataTransfer;
        var text = dt.getData('text/plain');
        dest.innerHTML += text;
        e.stopPropagation();
        e.preventDefault();
        return false;
    }, false);
   
    </script>
</body>
</html>

HTML5 form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法

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

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

API：

dragstart 被拖放元素 開始拖放時

drag 被拖放元素 拖放過程中

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

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

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

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

dragend 拖放的對象 拖放結束

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

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

看完上述內容，你們掌握HTML5 form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

網站名稱：HTML5form標簽中解放表單驗證和增加文件上傳以及集成拖放的使用方法
網站網址：http://vcdvsql.cn/article4/pcodie.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、App設計、網站收錄、域名注冊、云服務器、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

外貿網站建設