Native JS achieve picture upload and preview

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>原生实现图片预览功能</title>
 8 </head>
 9 <body>
10     <label for="file">点击上传文件</label>
11     <input id="file" onchange="uploadFiles()" accept="image/png,image/jpeg" type='file' multiple />
12     <div class="preview">
13         <p>No files currently selected for Upload </ P>
 14      </ div>
 15      <Script>
 16          const = document.querySelector INPUT ( 'INPUT' );
 . 17          input.style.opacity = 0 ;
 18 is          function UploadFiles () {
 . 19              const = input.files Files ; // Get files from the file list attribute element 
20 is              const preview = document.querySelector ( 'preview.' );
 21 is              the while (preview.firstChild) { // always clear the original list 
22 is                  preview.removeChild (preview.firstChild );
 23              }
 24             const ol = document.createElement('ol');
25             preview.appendChild(ol);
26             for(let file of files) {
27                 const li = document.createElement('li');
28                 const newLi = showFiles(file, li, preview);
29                 preview.appendChild(newLi);
30             }
31         }
32         function showFiles(file, li) {
33             const { name, size, type  } = file;
34             const isValidate = validateFileType(type)
35             if (isValidate) {
36                 const img = document.createElement('img');
37                 img.src = window.URL.createObjectURL(file); //***生成文件路径，添加到img的src
38                 const sizeChanged = getSize(size);
39                 const textContent = document.createTextNode(name + ': ' + sizeChanged);
40                 li.appendChild(textContent);
41                 li.appendChild(img);                
42             } else {
43                 const textContent = document.createTextNode("InValide File Type");
44                 li.appendChild (textContent);
 45              }
 46 is              return Li;
 47          }
 48          function getSize (size) { // calculate the size of the user according to the customary 
49              IF (size <1024 ) {
 50                  return size + 'byte' ;
 51 is              } the else  IF ( size <1048576 ) {
 52 is                  return (size / 1024) .toFixed (. 1) + 'KB';
 53 is              } the else {
 54 is                  return (size / 1048576) .toFixed (. 1) + 'MB';
 55              }
 56 is         }
57         const fileTypes = ['image/png', 'image/jpeg'];
58         function validateFileType(type) { // 验证文件类型
59             if (!fileTypes.includes(type)) {
60                 return false;
61             }
62             return true;
63         }
64     </script>
65 </body>
66 </html>
Native JS achieve picture upload and preview

Guess you like
