JavaScript で画像プレビューを実装する 2 つの方法

この記事では、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. onload

イベント

を呼び出してリッスンする必要がありますが、ファイルがいつ読み取られたかはわかりません。 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 で画像プレビューを実装する方法をエディターが紹介するいくつかの方法です。何かお役に立てれば幸いです。ご質問がありましたら、メッセージを残してください。編集者が時間内に全員に返信します。スクリプト ハウス Web サイトをサポートしてくださった皆様にも感謝いたします。

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