1.画像プレビューを実現する方法。
それを理解した後、方法は実際には似ています。おそらく次の方法があります。
input [type = file]要素のオンチェンジイベントを購読します。
選択したパスが変更されると、画像がサーバーにアップロードされ、画像のアドレスがサーバー側に戻り、IMG要素に割り当てられます。
短所：ワークロードは大きい。一部のアップロードは、ユーザーが最終的にアップロードする必要がある写真ではありません。ただし、この方法は、アップロードプロセス中に選択されたすべての写真をサーバーに保存し、リソースの無駄を引き起こします。さらに、サーバー側の一時的なプレビュー画像のクリーニングには、一定量の作業も必要です。
新しいHTML5機能FILEREADERを使用します。
このオブジェクトは多くの関連する方法を提供します。最も重要な方法はReadasdataurlです。詳細を確認するには私をクリックしてください。
短所：FilReaderのReadasDataurl Methodを介して取得されたデータURIスキームは、非常に長いBase64文字列を生成します。画像が大きい場合、文字列は長くなります。ページリフローが発生した場合、パフォーマンスの劣化を引き起こします。さらに、ブラウザのサポートは一貫性がなく、サポートされているブラウザはFF3.6+、Chrome7+、IE10+です。
window.url.url.createobjecturlをFilereaderの代わりに使用し、dxmingagetransform.microsoft.alphaimageloaderフィルターを使用して、IEと互換性があります。
短所：IE11のセキュリティ上の考慮事項により、ユーザーの選択されたファイルの実際のアドレスは、入力[type = file]要素の値、outourhtml、およびgetattributeを使用して取得できず、取得することのみができます。
D：/Frontend/ファイル名。したがって、document.selection.createrangeCollectionメソッドを使用して、実際のアドレスを取得する必要があります。
2。私のプラグインの生産
より保守的な方法を選択しました。これは、window.url.createObjecturlをFileReaderの代わりに使用する3番目の方法であり、dmimagetransform.microsoft.alphaimageloaderフィルターを使用してIEと互換性があります。
sthing最初のステップはHTMLレイアウトです
<div id = "pic"> <img id = "preview" src = "../ default.jpeg"> </div> <入力タイプ= "file" id = "uploadbtn" accept = "image/*" onchange = "setpreviewpic（）">
そんなに簡単に言いたいですか？
秒ステップ、プラグインJSカプセル化。
1.オブジェクトを作成します
主に、継承を組み合わせた方法を採用し、2つの方法、つまり単一の画像アップロードと複数の画像アップロードをカプセル化します。単一の画像のアップロードであろうと、単一の画像のアップロードであろうと、入力ボタン、IMGタグ、IMG、および最大単一の画像値をKBで渡してアップロードする必要があります。したがって、アップロード画像オブジェクトを作成するときに、これらの4つのパラメーターを渡す必要があります。このオブジェクトを作成する方法は次のとおりです。
var setPreviewpic = function（fileobj、preview、picwrap、maximgsize）{this.fileobj = fileobj; this.preview = preview; this.picwrap = picwrap; this.maximgsize = maximgsize;}2。一致するパターンを定義します
Imagesをアップロードしているため、Accept = "Image/*"を入力に追加して予備制限を作成することに加えて、PATH検出を介した画像であるかどうかを判断するには、JSの規則性も必要です。したがって、2つの方法で使用するためにプロトタイプでこのパターンを定義します。
setPreviewpic.prototype.pattern = new regexp（ '/。（jpg | png | jpeg）+$'、 'i'）;
3。メソッドを定義します
主なことは、環境がIE11よりも低いかどうかを判断し、2種類のソリューションを書き込むことです。 1つ目は、IMGのSRCを変更して画像を直接プレビューすることであり、2つ目は、IEの低いバージョンの下でフィルターを介してプレビュー効果を達成することです。
FF、Chrome、IE11以降：（複数の画像をプレビューするためのコードがここに掲載されています）
<span> if（maxpics）{</span> <br> if（this.fileobj.files && this.fileobj.files [0]）{var imgs = this.picwrap.queryselectorall（ 'img'）; // dom var num = imgs.length; var html = this.picwrap.innerhtml; if（number（num）<number（maxpics）））{//最大アップロード制限を超えるかどうかを判断しますhtml = '';} if（this.pattern.test（fileobj.files [0] .name）））{if（judgesize [0] .size/1024、this.maximgsize））{//画像のサイズが制限を超えるかどうかを判断style = "margin：5px; width： '+width+' px; height： '+height+' px;" src = '+window.url.createobjecturl（this.fileobj.files [0]）+' /> '+html; this.picwrap.innerhtml = html;} else {alert（ 'アップロードした画像は大きすぎる！'）;}} else {alert（ 'アップロードしたものは画像ではないようです！'）;IE11では、フィルターを使用して効果を実現します。
var nums = this.picwrap.childnodes.length; // queryselectorallおよびその他の方法はIE6以下ではサポートされていないため、子どもの長さによって（nums <maxpics+2）if（nums <maxpics+2）で（nums <maxpics+2）if（nums <maxpics+2）で判断できます{// 2の追加は、デフォルトのイメージがあります。 if（document.selection）{var imgsrc = document.selection.createrange（）。text; var image = new image（）; image.src = imgsrc; filesize = image.filesize; if（judgesize（image.filesize/1024、this.maximgsize））{// divのサイズはIE varで設定する必要がありますele = document.createelement（ 'div'）; ele.style.width = width+'px'; ele.style.height = height+'px'; ele.style.filter = "progid：dmximagetra nsform.microsoft.alphaimageloader（sizingmethod = scale、src = '"+imgsrc+"'） "; try {this.picwrap.appendchild（ele）;} catch（e）{alert（ 'theアップロードした画像が正しくありません。もう一度選択してください！ '）; false;} this.preview.style.display = 'none'; document.selection.empty（）;} elser {alert（ 'アップロードした画像は大きすぎます！'）;}}}この時点で、それは完了です！
使用法：
<script type = "text/javascript" src = "../ js/singlepic.js"> </script> <script> var fileobj = document.getElementbyId（ 'uploadbtn'）; var preview = document.getElementbyid（ 'preview'）; var picwrap = document.getelementbyid（ 'pic'）; fileobj.onchange = new by setPreviewPic（FileOBJ、Preview、PicWrap、100）; //アップロード画像オブジェクトを定義するパラメーターは、画像、IMGタグパッケージ、IMGにラップされたDiv、および最大単一の写真値をアップロードするための入力ボタンです。 // uploadpics（200,250,2）; // uploadpics（200,250,2）; // uploadpics（200,250,2）; // uploadpics（200,250,2）; //複数の画像をアップロードすると、パラメーターは幅、高さ、最大アップロード数です} </script>
上記は、編集者が紹介したJSアップロード画像プレビュープラグインプロダクション（IE6と互換性）に関する関連する知識です。それがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者は時間内に返信します！