導入
FileReaderオブジェクトを使用して、Webアプリケーションは、ユーザーのコンピューターに保存されているファイル（または生データバッファー）のコンテンツを非同期的に読み取り、ファイルオブジェクトまたはBLOBオブジェクトを使用して、処理するファイルまたはデータを指定できます。ファイルオブジェクトは、<入力型= "text" />要素でファイルを選択した後にユーザーが返したフィルリストオブジェクトから、またはhtmlcanvaselementでmozgetasfile（）メソッドを実行した後のドラッグアンドドロップ操作によって生成されたdatAtransferオブジェクトからのものです。
複数のページ、複数の写真のデモコードをアップロードします
<！doctype html> <html> <head> <title>画像をアップロードしてプレビュー画像を表示</title> <style> #Result img {height：100px;ディスプレイ：インラインブロック。マージン右：10px;マージンボトム：10px; } </style> </head> <body> <div> <p> <label>画像ファイルを選択してください：</label> <入力タイプ= "file" id = "file_input" style = "display：none;" /> </p> <div id = "result"> <a href = "javascript：void（0）;">画像</a> </div> </div> <div> <p> <label>画像ファイルを選択してください：</label> <入力タイプ= "file" file_input "style =" /> </p> <div id = "result"> <a href = "javascript：void（0）;">画像</a> </div> </div> <スクリプトsrc = "jquery-2.2.1.min.js"> </script> <script> $（ "。add_img_btn"）。 $（ "。ADD_IMGS"） 「申し訳ありませんが、ブラウザはFileReaderをサポートしていません」。 input.setattribute（ 'disabled'、 'disabled'）; } else {$（input）.unbind（ "change"）。 function（e）{$（result）.append（ '<img src = "'+this.result+'"/>'）;上記はこの記事に関するものであり、誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。