画像プレビューのJS実装の紹介をまとめます

この記事では、JS で picturepreview を実装する 2 つの方法を主に紹介します。これは非常に優れており、参考にすることができます。ユーザー エクスペリエンスを考慮して、Web ページ上の写真はアップロードする前にプレビューする必要があります。これは非常に必要な手順です。第 1 に、これにより、問題が発生してストレージ リソースが占有される画像ファイルがデータベースに送信されるのを防ぐことができます。

プレビューを実装するには 2 つの方法があります。1 つは window.URL.createObjectURl メソッドを使用して、選択した画像データ (入力の値としてかろうじて理解できる) の BLOB オブジェクト パスを生成する方法です。もう 1 つは、選択された画像データの BLOB オブジェクト パスを生成する方法です。 FileReader を使用してエクストラクターを読み取ることです。

したがって、どの方法であっても、まずファイルデータを取得する必要があります。ファイルデータはファイルコレクションから取得されます。

方法 1:

コードは次のとおりです:

<input type=file id="inp">
<script>
 inp.onchange=function(){
 var file=this.files[0] // 获取input上传的图片数据;
 var img=new Image() ;
 url=window.URL.createObjectURL(file) // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
 img.src=url;
 //其实也可一句代码搞定，不需要声明那么多变量；img.scr=window.URL.cteateObejectURL(this.files[0]) ;
 然后把img添加到页面就实现预览了
 }
<script>

方法 2:

FileRader オブジェクト を使用してファイルを読み取る 4 つのステップに分けることができます。 ; 1. FileReader ペアを作成します。 2. readAsDataURL メソッドを呼び出して、監視します。 3. 完全なデータを取得する必要がありますが、ファイルがいつ読み取られたかはわかりません。 ? 4. FileRader オブジェクト r の result

属性

を介して読み取り結果を取得します。 コードは次のとおりです:

<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
 var read=new FileReader() // 创建FileReader对像;
 read.readAsDataURL(this.files[0]) // 调用readAsDataURL方法读取文件;
  read.onload=function(){
   url=read.result // 拿到读取结果;
   var img=new Image();
   img.src=url;
   p.appendChild(img);
 }
 }

以上が画像プレビューのJS実装の紹介をまとめますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。