JavaScript で画像プレビューを実装する 2 つの方法-PHPチュートリアル-php.cn

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

陈政宽～

リリース： 2023-03-11 21:22:01

オリジナル

3849 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。