1 <！DOCTYPE HTML> 2 <HTMLのlang = "EN"> 3 <ヘッド> 4 <メタのcharset = "UTF-8"> 5 <メタ名= "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0 "> 6 <メタHTTP-当量=" X-UA-互換」コンテンツ= "IE =縁"> 7 <タイトル>原生实现图片预览功能</タイトル> 8 </ HEAD> 9 <BODY> 10 <ラベルのため = "ファイル">点击上传文件</ラベル> 11 <入力ID = "ファイル"のonchange = "uploadFiles（）"を受け入れる= "画像/ PNG、画像/ JPEG"タイプ= 'ファイル' 複数の/> 12 <divのクラスには、= "プレビュー"> 13 <P>何のファイルは、現在選択されていません以下のためのアップロード</ P> 14 </ div> 15 <SCRIPT> 16 CONST = document.querySelector入力（ 'INPUT' ;） 。17 input.style.opacity = 0 ; 18である 関数UploadFiles（）{ 19 CONST = input.filesファイル; // 属性要素ファイルリストからファイルを取得する 20は constのプレビュー= document.querySelector（「プレビュー」）; 21は、 しばらく（preview.firstChild）{ // 元のリスト必ずしも明確で 22はある preview.removeChild（preview.firstChild ）; 23 } 24 CONST OL =のdocument.createElement（ 'OL' ）。 25 preview.appendChild（OL）。 26 のための（ファイルのファイルを聞かせて）{ 27 のconstのLi =のdocument.createElement（ 'リー' ）。 28 CONST newLi = showFiles（ファイル、リチウム、プレビュー）。 29 preview.appendChild（newLi）。 30 } 31 } 32 関数showFiles（ファイル、Li）と{ 33 CONST {名前、サイズ、タイプ} = ファイル。 34 CONST isValidate = validateFileType（型） 35 もし（isValidate）{ 36 CONST IMG =のdocument.createElement（ 'IMG' ）。 37 img.src = window.URL.createObjectURL（ファイル）。// ***生成文件路径、添加到IMG的SRC 38 CONST sizeChanged = のgetSize（サイズ）。 39 CONSTのTextContent = document.createTextNode（名+ '：' + sizeChanged）。 40 li.appendChild（のTextContent）。 41 li.appendChild（IMG）。 42 } 他{ 43 CONSTのTextContent = document.createTextNode（ "InValideファイルの種類" ）。 44 li.appendChild（のTextContent）; 45 } 46は、 戻りリチウムを; 47 } 48 機能のgetSize（サイズ）{ // 慣習に従ってユーザの大きさを計算し 49 IF（サイズ<1024 ）{ 50 リターンサイズ+ 'バイト' ; 51れる } そう IF（サイズ<1048576 ）{ 52が リターン（サイズ/ 1024）.toFixed（1）+ 'KB'; 53である } 他{ 54が リターン（サイズ/ 1048576）.toFixed（1）+ 'MB'; 55 } 56れます } 57 CONST fileTypesプロパティ= [ '画像/ PNG'、 '画像/ JPEG' ]。 58 機能 validateFileType（タイプ）{ // 验证文件类型 59 もし（！fileTypes.includes（タイプ））{ 60 リターン はfalse ; 61 } 62 リターン 真。 63 } 64 </スクリプト> 65 </ BODY> 66 </ HTML>