HTML input type=fileファイルフォーム要素の選択

6300 ワード

先端

by zhangxinxu from http://www.zhangxinxu.com本住所:http://www.zhangxinxu.com/wordpress/?p=5071
一、良生-input type=fileとファイルアップロード
本明細書でいうinput type=fileは、typeのタイプがfileであるinput要素を指し、最も簡単なHTMLコードは以下の通りである.

しかし、慣れるために、私たちは多く書きます.

HTML 5が登場する前に(XHTML)、私たちの閉じたルールにはいくつかの違いがあります.

名前の通り、ファイルを選択してアップロードします.
万悪の旧時代、HTML 5が登場する前に、原生のfile inputフォーム要素は一度に1枚の画像をアップロードするしかありませんでした.一度にマルチマップをアップロードするインタラクションのニーズを満たすことができないため、多くのシーンがswfuploadされる.jsが取って代わって、少しずつ人々の視野から薄れていく感じがします.
しかし、技術の発展は、日進月歩で、30年河東、30年河西である.オリジナルHTML 5フォームの多図(multiple属性)、アップロード前のプレビュー、バイナリアップロードなどのサポートが広がるにつれて、オリジナルのfile inputフォーム要素はまた新しいアップグレードを迎え、flashを背景としたswfupload.jsは寂しさに決まっている.
しかし、PCプロジェクトについては、IE 8-IE 9ブラウザは無視できません.したがって、現在流行している処理方法の一つは、HTML 5 fileアップロードとflash swfuploadアップロードを統合するモードであり、オリジナルHTML 5アップロードを優先的に使用し、サポートされていない、flashアップロードを使用することである.以前、HTML 5のアップロードに関する記事がありましたが、毎日アクセスが高いのは「HTML 5ベースのプレビュー可能なマルチピクチャAjaxアップロード」ですので、興味があればご覧ください.
二、蓮安-原生inputアップロードとフォームform要素
ブラウザのオリジナルプロパティを使用してファイルのアップロード(画像など)効果を実現したい場合は、親のform要素に捨てられないものがあります.

enctype="multipart/form-data"

enctype属性は、サーバに送信する前にフォームデータをどのように符号化すべきかを規定しており、デフォルトの符号化は「application/x-www-form-urlencoded」である.通常のデータには適用可能であるが、ファイル、科科科については、むやみに符号化することはできない.これは何であり、multipart/form-dataをenctype属性値とするしかない.
旧時代の単図アップロードでもHTML 5の多図アップロードでもそうです.
三、沿見-原生file input画像アップロード前のプレビューとAjaxアップロード
ファイル、特に画像は、登場前にプレビューでき、素晴らしいインタラクティブな体験です.サーバーを動かさず、トラフィックを消費しないで、素晴らしいですね.
理想はいいが、実現すると......
HTML 5がまだ登場していない古い時代には、低バージョンのIEブラウザだけが方法があったようで、プライベートのフィルタを使って、安全の制限を超えて(実は悪いものを利用して)、画像の直接プレビューを実現しました.しかし、その時、Chrome、FireFoxはこれを出していなかったので、オリジナルfile inputを使って画像のアップロード前のプレビューを実現しようとすると、互換性のハードルが越えにくい.
しかし、その後、HTML 5が来て、私たちは転機が現れて、IE 10+とその他の現代のブラウザ、私たちに直接画像のデータを読み取ることができて、それからページの上で現れて、アップロードの前のプレビューを実現しました;以前の古いIEのフィルタポリシーを加えると、実行可能なようです.しかし、古いIEブラウザでは一度に1つのファイルしか選択できないので、単図だけアップロードする場合は、考えてみてください.
従来のformコミットは、ページフローを変更する、すなわちリフレッシュ後にジャンプします.良い体験はAjaxインタラクションを歩くべきです.HTML 5ではバイナリフォームデータのコミットがサポートされているので、Ajaxがアップロードしたファイルデータを余裕を持ってコミットすることができます.古いIEブラウザはどうしますか?
一般的な方法は次のとおりです.

form要素には、ページ内に隠されているtarget要素の

</code>を す<code>id</code>  が  されました.<br><pre/><form action="" method="post" enctype="multipart/form-data" style="color:#cd0000;">target="uploadIframe"&gt;&lt;
<iframe style="color:#cd0000;">id="uploadIframe"&gt;

  
     </code>   <code>onload</code>  ，      （      ），         ，  。 
    <div class="zxx_code"> 
     <pre><code>var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;
var response = doc.body &amp;&amp; doc.body.innerHTML;</code></pre>  <br></li>  <br>OK、もちろん、  のように  をかけずにjqueryを   うこともできます.form.js.   は、 のようになっていますが、そんなに  な  はありません.<br> 、  -  file inputサイズ、ボタン  などのUIカスタマイズ<br>  のfile inputが られないもう つの  は、 い さがまだコントロールできないことだ.<br>たとえば、 の のような「ファイルを  」という  では、fileコントロールのナイフをカスタマイズすることはできません.<a href="https://img.md5.com/image/info8/ec111a3d6f8a43a08abd9cd4cad0c69c.png" target="_blank"><img alt="HTML input type=file           _ 1   " class="check_url_is_full" src="https://s1.md5.ltd/image/51065491e90330c207a125e9a22891ee.png" width="232" height="101" style="border:1px solid black;"/></a><br>どうしようかな?<br>fileタイプの  を   <code>0</code>で、 たちのきれいなボタンに う  があります.そして たちはきれいなボタンをクリックして、  にクリックするのは<code>file</code>  です.<br>しかし、この  にはいくつかの  があります.<li>サイズ  が  ではありません.CSS <code>width</code>のプロパティにはブラウザがありません.<code>size</code>を  する  があります.その 、  な  も  ではありません.きれいなカスタムボタンにカバーするのは しいです.</li>  <li>スタイルは  しにくく、ボタンの<code>hover</code>  および<code>active</code>  は  しにくい.</li>  <li> HTML  の  と   めコスト.</li>  <br>より い  は、<code>label</code>  を  して<code>file</code>コントロールに   けることです.<li>カスタマイズされたきれいなボタンをクリックすると、fileコントロールをクリックします.</li>  <li>    が   な  はない.</li>  <li> hover  active  に  できない  はない.</li>  <li> たちのきれいなボタンはformフォーム  の にもあります. えば、 のようにします.<pre><code><label class="ui_button ui_button_primary" for="xFile">    </label>
</code></pre>  <br>  は  の り(リアルリアルタイム  ):ファイル</li>をアップロード<br> 、  -fileタイプコントロールのaccept  <br>input fileタイプコントロールには<code>accept</code>という  がありますが、あまり らない  もいるかもしれません.ブラウザが け れるファイルのタイプ、つまりシステムの  ファイルのポップアップを くときに、デフォルトのインタフェースに  されるファイルのタイプを  することができます.たとえば、<code>accept="image/jpeg"</code>の  、インタフェースにはjpgピクチャのみがあり、 のようにスクリーンショットされます.また、フォームの  には「カスタムファイル」ボタンがあります.<a href="https://img.md5.com/image/info8/80e49236d864448b8587e1ccc193e5f4.jpg" target="_blank"><img alt="HTML input type=file           _ 2   " class="check_url_is_full" src="https://s1.md5.ltd/image/a9bfabce7be90ab91746218cb228dbff.jpg" width="341" height="248" style="border:1px solid black;"/></a><br>  に  された  、jpgピクチャのみの  が  されることは なく、いずれもピクチャタイプのみの  が  であるはずですが、この  、  のように  できます.<pre><code>accept="image/*"</code></pre>  <br>すると、「カスタムファイル」ボタンは、より  の  な「ピクチャファイル」になります:<a href="https://img.md5.com/image/info8/6abacf6ee2af43908b72eb2a84651b85.png" target="_blank"><img alt="HTML input type=file           _ 3   " class="check_url_is_full" src="https://s1.md5.ltd/image/cbf3b998db077929682621832b835705.png" width="405" height="282" style="border:1px solid black;"/></a><code>accept</code>の   は、  にはMIMEタイプであり、 えば、 のような   なものがあります.<pre><code>accept="application/pdf"
accept="audio/x-mpeg"
accept="text/html"
.accept="video/x-mpeg2"</code></pre>  <br> に、  の   をカンマで  ります.たとえば、 のようになります.<pre><code><input accept="audio/*,video/*,image/*"/></code></pre>  <br> 、また-input file のクリア<br>  のブラウザは  <code>value = ""</code>で、  のIEブラウザはだめのようで、<code>file.outerHTML = file.outerHTML</code>を っているようで、   はテストしていません.<br>しかし、  だと います.ブラウザなどを  しなければなりません.    のAjax  アップロードのように、<code>form.reset()</code>に  アップロードすればよい.<br>  <br><img src="https://s1.md5.ltd/image/a869150ce2e35b77b6f6e8897d05b81f.gif" alt="" width="0" height="0" class="check_url_is_full"/>  <br>  はオリジナルの  で、いつも   を  していくつかの  いを  することができて、そのため  して の  を  して、 を って  で、 い  いの  の  を けて、  にもっと い  の  があります.   :http://www.zhangxinxu.com/wordpress/?p=5071 <br></li>

SQL-カスタム関数

kuangbin特集一Dungeon Master(BFS)