直接コードに
↓
1 <！DOCTYPEのHTML > 2 < HTML > 3 < ヘッド> 4 < メタのcharset = "UTF-8" > 5 < タイトル> HTML 5图片上传预览</ タイトル> 6 < スタイル> 7 #preview { 8 の幅：300ピクセル。 9 高さ：300ピクセル。 10 オーバーフロー：隠されました。 11 } 12 IMGの#previewは{ 13は 幅：100％; 14 高さ：100％; 15 } 16 </ スタイル> 17 <！ - の例では、ラインに、以下の参照をローカルのjQueryを使用していた- > 18 <！ - - <スクリプトSRC = "jQueryの-1.7.2.min.js"> </ SCRIPT> - > 19 <！ - jQueryのオンラインリファレンスのすべてのバージョン-小鵬魏- CSDNのブログ- > 20 <！ - HTTPS：/ /blog.csdn.net/qq_40147863/article/details/83116859 - > 21である < スクリプトSRC = "http://libs.baidu.com/jquery/1.7.2/jquery.min.js"> </スクリプト> 22 < スクリプトタイプの=「テキスト/ JavaScriptを」> 23 // 画像が利用できる完全な例[テスト] _javascriptスキルをプレビューアップロードするJS + HTML5 _スクリプトホーム 24 // https://www.jb51.net/article /111651.htm 25 // URL.createObjectURLとURL.revokeObjectURL -詩＆距離-ブログパーク 26 // https://www.cnblogs.com/liulangmao/p/4262565.html 27 関数preview1（ファイル）{ // ブラウザの下のバージョンはサポートしていません 28 のvar IMG = 新しい新しい画像（）、URL = img.src = URL.createObjectURL（ファイル）; 29 のvar $のIMG= $（IMG） 30 img.onload = 関数（）{ 31 URL.revokeObjectURL（URL）。 32 $（' #preview ' ）.empty（）（$のIMG）を追加します。; 33 } 34 } 35 関数preview2（ファイル）{ 36 VARのリーダー= 新しいFileReaderの（）。 37 reader.onload = 関数（E）{ 38 VAR $ IMG = $（' <IMG> ' ）.ATTR（" SRC "、E.target.result）; 39 $（' #preview ' ）.empty（）アペンド（$ IMG）;. 40 } 41は reader.readAsDataURL（ファイル）; 42である } 43である 44れる $（関数（）{ 45 $（' [TYPE =ファイル] ' ）.change（関数（E）{ 46である VaRのファイル= e.target.files [ 0 ]; 47 // preview1（ファイル）; //プロセスは、ブラウザが低いバージョンをサポートしていません 48 Preview2を（ファイル）; // メソッド2 49 }） 50 }） 51 </ スクリプト> 52 </ ヘッド> 53 < ボディ> 54 < フォームのenctype = "マルチパート/フォームデータ" アクション= "" 方法= "POST" > 55 < 入力タイプ= "ファイル" 名= "imageUpload " /> 56 < DIV ID ="プレビュー」スタイル= "ボーダー：1ピクセル灰色固体;" > </ divの> 57 </ フォーム> 59 </ HTML >