VSC | 上传图片并预览功能的几种方法

 一、上传图片并预览功能

        选择一张或几张图片后，通过浏览器即时生成并显示预览，利用HTML5的<input type="file">和JavaScript的FileReader API，实现图片的本地预览，提升用户体验和效率。

二、方法

        首先，引入JQuery。

//首先，引入JQuery。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        然后，检测是否支持File API。

<script>
  //检测是否支持File API
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    //  支持
    alert('支持')
  } else {
    alert('不支持');
  }
</script>

2.1 label方式

        点击label就是对input进行操作。

html

<input id="img_input" type="file" accept="image/*" />
<label for="img_input"></label>
<div class="preview_box"></div>

CSS

.preview_box img {
   width: 200px;
}

JS

  $("#img_input").on("change", function (e) {
    var file = e.target.files[0]; //获取图片资源

    // 只选择图片文件
    if (!file.type.match("image.*")) {
      return false;
    }

    var reader = new FileReader();

    reader.readAsDataURL(file); // 读取文件

    // 渲染文件
    reader.onload = function (arg) {
      var img =
        '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';
      $(".preview_box").empty().append(img);
    };
  });

2.2 FileReader接口的 readAsDataURL() 方法

        FileReader 接口的 readAsDataURL() 方法用于读取指定的 Blob 或 File 对象的内容。当读操作完成时，readyState 属性变为 DONE，并触发 loadend 事件。此时，result 属性包含作为 data: URL 的数据，将文件的数据表示为 base64 编码字符串。——摘自MDN

指路链接：FileReader：readAsDataURL() 方法 - Web API | MDN (mozilla.org)

html

<input type="file" accept="image/*" id="imageInput" onchange="previewImage()">  
<img id="preview" src="" alt="图片预览" style="max-width: 100px; height: auto;">

JS

function previewImage() {  
    const input = document.getElementById('imageInput');  
    if (input.files && input.files[0]) {  
        // 创建一个表示文件内容的URL  
        const url = window.URL.createObjectURL(input.files[0]);  
          
        // 将URL设置为<img>的src属性以预览图片  
        document.getElementById('preview').src = url;  
  
        // （可选）在图片不再需要时释放URL对象  
        // 注意：这通常是在图片不再显示时（比如用户选择了另一个文件或关闭了页面）进行的  
        input.onchange = null; // 如果你只想预览一次，可以这样做来阻止后续的onchange事件  
       
    }  
}

2.3 读取多个文件并预览

        multiple 属性在 <input type="file"> 元素中使用时，允许用户一次性选择多个文件进行上传。

html

<input type="file" id="fileInput" accept="image/*" multiple>  
<div id="preview2"></div>  

CSS

#preview2 img {
    max-height: 100px; /* 限制图片的最大高度 */
    width: auto; /* 保持图片的宽高比 */
    margin-bottom: 10px; /* 可选，添加一些底部边距 */
}

JS

document.getElementById('fileInput').addEventListener('change', function(event) {  
  // 清空之前的预览  
  document.getElementById('preview2').innerHTML = '';  
  
  // 遍历所有选中的文件  
  const files = event.target.files;  
  for (let i = 0; i < files.length; i++) {  
    const file = files[i];  
    if (!file.type.startsWith('image/')) {  
      console.warn(`${file.name} is not an image. Skipping...`);  
      continue; // 跳过非图像文件  
    }  
  
    const reader = new FileReader();  
    reader.onload = function(e) {  
      const img = new Image();  
      img.src = e.target.result;  
      img.alt = file.name; // 设置图片的alt属性为文件名  
      document.getElementById('preview2').appendChild(img);  
    };  
    reader.readAsDataURL(file);  
  }  
});  

三、总结

         采用HTML5与JavaScript技术，实现图片即时本地预览，支持多图选择，优化用户操作体验，提升上传效率与准确性。