整合營銷服務商

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

          免費咨詢熱線:

          HTML input type=file文件選擇表單元素二三事

          、良生- input type=file與文件上傳

          本文所說的input type=file指的是type類型是file的input元素,最簡HTML代碼如下:

          <input type=file>

          但是,為了習慣,我們多寫成:

          <input type="file">

          在HTML5出現之前(XHTML),我們的閉合規則則有些出入:

          <input type="file" />

          顧名思義,選擇文件,并上傳文件。

          在萬惡的舊時代,HTML5還沒有出現之前,原生的file input表單元素只能讓我們一次上傳一張圖片。無法滿足一次上傳多圖的交互需求,所以,很多場景,就被swfupload.js給取代了,有點逐漸淡出人們視野的感覺。

          然,技術發展,日新月異,三十年河東,三十年河西。隨著原生HTML5表單對多圖(multiple屬性)、上傳前預覽,二進制上傳等支持越來越廣泛,原生的file input表單元素又迎來了新的升級,flash為背景的swfupload.js注定要落寞。

          但是,對于PC項目,IE8-IE9瀏覽器還是不能忽略的。所以,現在,很流行的一種處理方式,就是HTML5 file上傳和flash swfupload上傳一起整合的模式,優先使用原生HTML5上傳,不支持的,使用flash上傳。我之前有篇關于HTML5上傳的文章,每天訪問量很高的:“基于HTML5的可預覽多圖片Ajax上傳”,大家有興趣可以看看。

          如果想使用瀏覽器原生特性實現文件上傳(如圖片)效果,父級的form元素有個東西不能丟,就是:

          enctype="multipart/form-data"

          enctype屬性規定在發送到服務器之前應該如何對表單數據進行編碼,默認的編碼是:”application/x-www-form-urlencoded“。對于普通數據是挺適用的,但是,對于文件,科科,就不能亂編碼了,該什么就是什么,只能使用multipart/form-data作為enctype屬性值。

          無論是舊時代的單圖上傳,還是HTML5中的多圖上傳,均是如此。

          文件,尤其圖片,上場前能夠預覽,是很棒的交互體驗。不走服務器,不耗費流量,多棒!

          理想雖好,實現起來……

          在HTML5還沒出現的舊時代,只有低版本的IE瀏覽器貌似有方法,使用私有的濾鏡,超越安全的限制(其實是利用了不好的東西),實現圖片直接預覽;但是呢,那個時候,Chrome, FireFox沒有這一出,于是,想要使用原生file input實現圖片的上傳前預覽,兼容性坎很難跨過去。

          但是,后來,HTML5來了,我們出現了轉機,IE10+以及其他現代瀏覽器,可以讓我們直接讀取圖片的數據,然后在頁面上呈現,實現了上傳前預覽;加上之前老IE的濾鏡策略,貌似,可行。但是呢但是,老的IE瀏覽器只能最多一次選擇一個文件,因此,只有單圖上傳的時候,大家可以考慮考慮。

          傳統的form提交,是要改變頁面流的,也就是刷新后跳轉。好的體驗應該是走Ajax交互的。HTML5里面支持二進制formData數據提交,因此,可以從容Ajax提交上傳的文件數據;那老舊的IE瀏覽器怎么辦?

          一般方法如下:

          <form action="" method="post" enctype="multipart/form-data" target="uploadIframe">< <iframe id="uploadIframe"></iframe>

          var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; var response = doc.body && doc.body.innerHTML;

          OK, 當然,你也可以不用像上面這么麻煩,直接使用jquery.form.js. 原理呢,就是上面這樣,但是,不需要這么麻煩。

          原生的file input不收待見的另外一個原因是:長的丑還不好控制。

          舉個例子,下圖這個“選擇文件”這幾個文字,我們就不好對file控件動刀子實現自定義:

          file input框

          怎么辦呢?

          有一種方法是這樣的: 讓file類型的元素透明度0,覆蓋在我們好看的按鈕上。然后我們去點擊好看的按鈕,實際上點擊是是file元素。

          然而,此方法有一些不足:

          更好的方法是,使用label元素與file控件關聯,好處在于:

          <label class="ui_button ui_button_primary" for="xFile">上傳文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

          效果如下(真實實時效果):

          input file類型控件有一個屬性,名為

          accept

          , 可能有些小伙伴不太了解。可以用來指定瀏覽器接受的文件類型,也就是的那個我們打開系統的選擇文件彈框的時候,默認界面中呈現的文件類型。例如:

          accept="image/jpeg"

          ,則界面中只有jpg圖片,如下截圖,同時,窗體右下方是“自定義文件”按鈕:

          自定義文件

          實際開發的時候,很少只允許傳jpg圖片,應該都是只能傳圖片類型,此時,可以使用:

          accept="image/*"

          于是乎,“自定義文件”按鈕變成了語義更明確的“圖片文件”:

          圖片文件

          accept屬性值其實是MIME類型, 例如下面幾個可能常用的:

          accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2"

          然后,多個屬性值使用逗號分隔,例如:

          <input accept="audio/*,video/*,image/*">

          現代瀏覽器直接value = "", 有些IE瀏覽器貌似不行,好像使用file.outerHTML = file.outerHTML,我自己沒測試。

          不過我覺得比較麻煩,還要判斷瀏覽器什么的。像本文的Ajax單圖上傳,直接form.reset()就可以了。

          以上~

          本文為原創文章,會經常更新知識點以及修正一些錯誤,因此轉載請保留原出處,方便溯源,避免陳舊錯誤知識的誤導,同時有更好的閱讀體驗。

          html開發中,表單是頁面上重要的內容,用戶輸入內容大部分內容都是通過表單收集的,在html4中表單元素是相對繁瑣的,在html5中,吸納了web forms2.0標準,大大加強了針對表單元素的功能。下面為大家介紹html5中新增的表單元素。

          form元素

          在html4中表單內的從屬元素必須寫在表單內部,在html5中沒有這個限制,可以寫在頁面任何地方,然后給該元素一個from屬性,屬性值為該表單的id,這樣就可以聲明該元素從屬于指定的表單了。示例代碼:<form id="test"><input type="text"></form><textarea form="test"></textarea>textarea屬性被寫在form表單之外,但它從屬于form表單,所以將form表單id指定給textarea元素的form屬性。這樣的好處在于我們可以方便添加元素的樣式,因為它們不是分散在各表單之內。不過現在只是部分瀏覽器支持這一屬性。

          formaction屬性

          在html4中,一個表單所有的元素只能通過表單的action屬性統一提交另一頁面,而在HTML5中可以給所有的提交按鈕(<input type="submit">、<input type="image">、<button type="submit">),都增加了不同的formaction屬性,點擊不同的按鈕提交給不同的頁面。

          placeholder屬性

          placeholder是指當文本框(<input type="text">或<textarea>)處于未輸入狀態時文本框顯示的輸入提示。只要加上了placeholder屬性,在指定提示文字就可以了。

          autofocus屬性

          給文本框、選擇框或按鈕加上該屬性,當畫面打開時,控件自動獲得焦點。在html4中做到這個效果需要使用JavaScript如“control.focus()”。不建議隨意使用該屬性,比如搜索頁面中的搜索文本框。

          list屬性

          在html5中,為單行文本框增加了一個list屬性,該屬性的值為某個datelist元素的id。datelist也是html5新增的元素,該元素類似選擇框(select)。但是當用戶想要設定的值不在選擇列表時,允許自行輸入。該元素本身并不顯示,而是文本框獲得焦點時提示輸入的方式顯示。為了避免在沒有支持元素的瀏覽器顯示錯誤,可以用css將它設置為不顯示。

          autocomplete屬性

          輔助輸入所有的自動完成功能,節省輸入時間,同時也十分方便。可以指定“on”、“off”、“不指定”這三種值,不指定時,取決各個瀏覽器。屬性為on時,可以顯示指定候補輸入的數據列表,off反之。

          如果有漏掉其他方法,歡迎大家補充。每天學習一個知識點,每日寄語“失敗只有一種,那就是半途而廢。”

          TML5 是 HyperText Markup Language 5 的縮寫,HTML5 技術結合了 HTML4.01 的相關標準并革新,符合現代網絡發展要求,在 2008 年正式發布。HTML5 由不同的技術構成,其在互聯網中得到了非常廣泛的應用,提供更多增強網絡應用的標準機。與傳統的技術相比,HTML5 的語法特征更加明顯,并且結合了SVG的內容。這些內容在網頁中使用可以更加便捷地處理多媒體內容,而且 HTML5中還結合了其他元素,對原有的功能進行調整和修改,進行標準化工作。HTML5 在 2012 年已形成了穩定的版本。

          HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準,是構建以及呈現互聯網內容的一種語言方式.被認為是互聯網的核心技術之一。HTML產生于1990年,1997年HTML4成為互聯網標準,并廣泛應用于互聯網應用的開發。HTML5將Web帶入一個成熟的應用平臺,在這個平臺上,視頻、音頻、圖像、動畫以及與設備的交互都進行了規范。

          關于HTML5的一些新規范、新特性接下來,小編一一給咱們介紹下哈!

          一、智能表單

          表單是實現用戶與頁面后臺交互主要組成部分,HTML5在表單的設計上功能更加強大。input類型和屬性的多樣性大大地增強了HTML可表達的表單形式,再加上新增加的一些表單標簽,使得原本需要JavaScript來實現的控件,可以直接使用HTML5的表單來實現;一些如內容提示、焦點處理、數據驗證等功能,也可以通過HTML5的智能表單屬性標簽來完成。

          二、繪圖畫布

          HTML5的canvas元素可以實現畫布功能,該元素通過自帶的API結合使用JavaScript腳本語言在網頁上繪制圖形和處理,擁有實現繪制線條、弧線以及矩形,用樣式和顏色填充區域,書寫樣式化文本,以及添加圖像的方法,且使用JavaScript可以控制其每一個像素。HTML5的canvas元素使得瀏覽器無需Flash或Silverlight等插件就能直接顯示圖形或動畫圖像。

          三、多媒體

          HTML5最大特色之一就是支持音頻視頻,在通過增加了<audio>、<video>兩個標簽來實現對多媒體中的音頻、視頻使用的支持,只要在Web網頁中嵌入這兩個標簽,而無需第三方插件(如Flash)就可以實現音視頻的播放功能。HTML5對音頻、視頻文件的支持使得瀏覽器擺脫了對插件的依賴,加快了頁面的加載速度,擴展了互聯網多媒體技術的發展空間。

          四、地理定位

          現今移動網絡備受青睞,用戶對實時定位的應用越來,要求也越來越高。HTML5通過引入Geolocation的API可以通過GPS或網絡信息實現用戶的定位功能,定位更加準確、靈活。通過HTML5進行定位,除了可以定位自己的位置,還可以在他人對你開放信息的情況下獲得他人的定位信息。

          五、數據存儲

          HTML5較之傳統的數據存儲有自已的存儲方式,允許在客戶端實現較大規模的數據存儲。為了滿足不同的需求,HTML5支持DOM Storage和Web SQL Database 兩種存儲機制。其中,DOM Storage 適用于具有key/value對的基本本地存儲;而WebSQLDatabase是適用于關系型數據庫的存儲方式,開發者可以使用SQL語法對這些數據進行查詢、插入等操作。

          六、多線程

          HTML5利用Web Worker將Web應用程序從原來的單線程業界中解放出來,通過創建一個Web Worker對象就可以實現多線程操作。JavaScript創建的Web程序處理事務都是在單線程中執行,響應時間較長,而當JavaScript過于復雜時,還有可能出現死鎖的局面。HTML5新增加了一個WebWorkerAPI,用戶可以創建多個在后臺的線程,將耗費較長時間的處理交給后臺面不影響用戶界面和響應速度,這些處理不會因用戶交互而運行中斷。使用后臺線程不能訪問頁面和窗口對象,但后臺線程可以和頁面之間進行數據交互。子線程與子線程之間的數據交互,大致步驟如下:①先創建發送數據的子線程;②執行子線程任務,把要傳遞的數據發送給主線程;③在主線程接受到子線程傳遞回的消息時創建接收數據的子線程,然后把發送數據的子線程中返回的消息傳遞給接收數據的子線程;④執行接收數據子線程中的代碼。

          以上就是小編給咱們大家總結的HTML5的一些新特性。接下來,小編給咱們大家總結一下HTML5的優點,讓我們再來感受一下HTML5的魅力吧!!!

          HTML5作為新一代網絡標準能夠讓程序通過Web瀏覽器,消費者從而能夠從包括個人電腦、筆記本電腦、智能手機或平板電腦在內的任意終端訪問相同的程序和基于云端的信息。HTML5允許程序通過Web瀏覽器運行,并且將視頻等目前需要插件和其它平臺才能使用的多媒體內容也納入其中,這將使瀏覽器成為一種通用的平臺,用戶通過瀏覽器就能完成任務。此外,消費者還可以訪問以遠程方式存儲在“云”中的各種內容,不受位置和設備的限制。由于HTML5技術中存在較為先進的本地存儲技術,所以其能做到降低應用程序的響應時間為用戶帶來更便捷的體驗。

          好啦,今天小編就給大家分享到此,我們下期再見哈。


          主站蜘蛛池模板: 熟女精品视频一区二区三区| 末成年女AV片一区二区| 日韩综合无码一区二区| 精品日韩在线视频一区二区三区| 国产福利一区二区在线视频 | 99精品国产一区二区三区| 国产在线精品一区二区中文| 久久精品一区二区| 高清国产AV一区二区三区| 奇米精品一区二区三区在线观看| 日韩一区二区视频| 成人免费区一区二区三区| 一区二区三区国模大胆| 欲色aV无码一区二区人妻 | 亚洲色精品VR一区区三区| 国精品无码一区二区三区左线| 国产精品视频免费一区二区| 国产福利一区二区三区在线观看 | 亚洲av福利无码无一区二区| 2018高清国产一区二区三区| 色视频综合无码一区二区三区| 精品亚洲一区二区| 午夜视频一区二区| 久久国产精品最新一区| 国产精品亚洲一区二区无码| 日韩精品一区二区三区四区| 精品日韩一区二区| 夜色福利一区二区三区| 人成精品视频三区二区一区| 2021国产精品一区二区在线| 日本一区二区三区在线视频| 亚洲电影唐人社一区二区| 亚洲美女高清一区二区三区| bt7086福利一区国产| 99久久国产精品免费一区二区 | 亚洲高清成人一区二区三区| 精品少妇人妻AV一区二区三区| 亚洲色欲一区二区三区在线观看| 精品国产日韩亚洲一区在线| 精品人伦一区二区三区潘金莲| 精品久久国产一区二区三区香蕉|