画像アップロードは通常の関数であり、画像プレビューはアップロード関数に不可欠なサブ機能です。この前に、パスが変更されると、イメージがサーバーにアップロードされ、画像パスが取得され、値がIMG要素に割り当てられた入力[type = file]要素のオンチェンジイベントを購読していました。非同期ファイルの提出に対するソリューションに関係なく、サーバー側の一時的なプレビュー画像をクリーンアップして、ワークロードが増加しました。
MDNからの純粋なフロントエンド画像プレビューに関する関連情報を誤って見つけてから、それを整理して将来の参照のために記録しました。
1。準備1──Filereader
FileReaderは、BLOBおよびファイルタイプのデータを読むためのHTML5の新機能です。特定の使用法は次のとおりです。
（1）。建設方法
var fr = new fileReader（）;
（2）。属性
ReadyState：タイプは署名されていない短い、FileReaderインスタンスの現在の状態（空、0、データはまだロードされていません。1、データはロードされています。
結果：ファイルの内容は読み取り、読み取り専用です。
エラー：タイプはDomerrorであり、ファイルを読み取るときに発生するエラー、読み取り専用です。
（3）。方法
abort（）：読み取り操作を中止し、完了するようにreadystateを設定します。読み取り操作が実行されない場合、このメソッドを呼び出すと、dom_file_abort_err例外がスローされます。
readasarraybuffer（blob blob）：データを読む、結果属性はarraybufferタイプに設定されています
readastext（blob blob [、encoding = 'utf-8']）：データを読む、結果属性は文字列型に設定されています
readasbinarystring（blob blob）：データを読む、結果属性は元のバイナリデータに設定されています
readasdataurl（blob blob）：データを読む、結果属性はデータURIスキームフォームに設定されます（詳細については、「JSマジックホール：データURIスキームの紹介」をご覧ください）
（4）。イベント
オンロード：データを正常に読み取った後にトリガーされました
OneError：データを読み取るときに例外がスローされたときにトリガーされます
onloadstart：データを読む前にトリガーされます
onloadend：データを読んだ後にトリガーされ、onloadまたはonerrorの後にトリガー
Onabort：読み取りを中止した後にトリガーされます
Onprogress：読書中に定期的にトリガーされます
（5）。ブラウザのサポート
FF3.6+、Chrome7+、IE10+
2。準備2──dixmagetransform.microsoft.alphaimageloaderフィルター
（1）。機能：主な機能は、写真を透過的に処理することです（つまり、透明なPNGをサポートしていません）
（2）。スタイルでの使用方法
#preview {filter：progid：dmimmagetransform.microsoft.alphaimageloader（sizingmethod = scale、src = "dummy.png"）;}（3）。 JSでの使用方法
var preview = document.getElementById（ 'preview'）; preview.style.filter = preview.currentstyle.filter + "; progid：dmincigetransform.microsoft.alphaimageloader（sizingmethod = scale、src = 'dummy.png'）"; prepiew.filters.item（ "dmixteragetransform.microsoft.alphaimageloader"）。src = "dummy1.png";
（4）。属性
有効：オプション、フィルターがアクティブ化されているかどうかを設定します。値範囲真（デフォルト）、false
サイジングメソッド：オプションでは、フィルター作用画像がコンテナ境界内に表示される方法を設定します。
SRC：必須、絶対的または相対URLを使用して、背景画像を指します。 URLがユーザーコンピューターのローカルアドレスである場合、IMG要素のSRCがユーザーコンピューターのローカルアドレスである場合、ローカルファイルシステムへのアクセスを許可しない例外がスローされます。
実装
次に、FileReaderのReadasDataurlを使用してデータURIスキームを取得して画像プレビュー関数を実装し、フィルターdmimagetransform.microsoft.alphaimageloaderを使用してダウングレードします。
HTMLフラグメント：
<style type = "text/css">＃preview {width：100px;高さ：100px;} </style> <！ - [if lte ie 9]> <style type = "text/css"> #preview {filter：progid：dmimberagetransform.microsoft.alphaimageloader（sizingmethod = scale）; } </style> <！[endif] - > <入力型= "file" onchange = "showpreview（this）;"/> <div id = "preview"> </div>JSフラグメント：
var preview = function（el）{var pv = document.getElementById（ "preview"）; // ie5.5〜9フィルターを使用するif（pv.filters && typeof（pv.filters.item）=== 'function'）{pv.filters.item（ "dmincigetransform.microsoft.alphaimageloader"）。src = el.value; } else {//他のブラウザーとie10+（フィルターはサポートしません）filereader var fr = new filereader（）; fr.onload = function（evt）{var pvimg = new image（）; pvimg.style.width = pv.offsetwidth + 'px'; pvimg.style.height = pv.offsetheight + 'px'; pvimg.src = evt.target.result; pv.RemoveChild（0）; pv.AppendChild（PVIMG）; }; fr.readasdataurl（el.files [0]）; }};4。ピット
IE11はセキュリティ上の考慮事項を作成しているため、入力[type = file]要素の値、outerhtml、およびgetattributeを使用してユーザーの選択したファイルの実際のアドレスを取得することは不可能であり、C：/ fakePath/ファイル名のみを取得できます。したがって、IE11が使用されているが、テキストモードが10未満に設定されている場合、画像プレビューを実現する方法はありません。
ソリューション1──ヘッドタグの下にあるこの文は次のとおりです。これにより、現在のIEの最高バージョンを使用して、デフォルトでWebページを解析およびレンダリングできることがわかります。
ソリューション2──Document.selection.createrangeColleciton （）を使用して、実際のアドレスを取得します。特定の操作は次のとおりです。
// fileelが[type = file] element fileel.select（）; var filepath = document.select.createrangecollection（）[0] .htmltext;であると仮定します。
5。サプリメント：Filreaderの代わりにWindo.url.createObjecturlを使用します
FileReaderのReadasDataurlメソッドを介して取得されたデータURIスキームは、非常に長いBase64文字列を生成します。画像が大きい場合、文字列は長くなります。ページリフローが発生した場合、パフォーマンスの劣化を引き起こします。解決策は次のとおりです。
1.プレビューされたIMGタグは、絶対的な位置決めを使用して、ドキュメントの他の要素とは何の関係もない通常のドキュメントフローから抜け出し、反射時にパフォーマンスに影響しません。
2。window.url.createobjecturl（blob blob）を使用して、データリンクを生成します。
var CreateObjecturl = function（blob）{return window [window.webkiturl？ 'webkiturl'： 'url'] ['createObjecturl']（blob）;};注： window.url.createObjecturlで生成されたデータリンクはメモリ独占的であるため、随時使用する場合は、window.url.revokeobjecturl（objurlをドンストリングする）を呼び出す必要があります。ページが更新されると、コンテンツも自動的にリリースされます。
var ResolveObjecturl = function（blob）{window [window.webkiturl？ 'webkiturl'： 'url'] ['regokeobjecturl']（blob）;};上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。