输入文件上传图片预览功能实例代码

简介

在web开发中，上传图片是一个很常用的功能。而预览上传图片则是一个更加友好的交互体验。在本文中，我们将演示如何使用HTML、CSS、JavaScript实现一个上传图片并预览的功能。

HTML部分

首先，我们需要在HTML中添加一个文件选择框和一个图片预览框。HTML代码如下：

<input type="file" multiple onchange="previewImages()">
<div id="preview"></div>

其中，文件选择框使用input标签，type属性为file。onchange属性指定了一个JavaScript函数，这个函数在文件选择框中选择文件后触发。预览框使用了一个div标签，id属性为preview。

JS部分

在JS部分，我们需要编写一个预览图片的函数。这个函数将接收一个参数，即文件选择框中选中的文件对象。函数会将文件对象转换为一个URL，然后将其添加为一个img标签的src属性。JS代码如下：

function previewImages() {
  var preview = document.getElementById("preview");
  // 获取文件选择框中选中的所有文件
  var fileArr = document.getElementById("upload").files;
  // 遍历文件数组
  for (var i = 0; i < fileArr.length; i++) {
    var reader = new FileReader();
    // 将文件读取为Data URL
    reader.readAsDataURL(fileArr[i]);
    // 当文件读取完成时触发
    reader.onload = function (e) {
      var img = document.createElement("img");
      img.src = e.target.result;
      preview.appendChild(img);
    }
  }
}

在函数中，我们首先获取到预览框的DOM对象，并获取输入文件框选中的文件数组。然后遍历文件数组，使用FileReader对象读取文件的Data URL。当读取完成时，将Data URL转换成img标签的src，最后将img标签添加到预览框中。

CSS部分

在CSS部分，我们需要为预览框添加一些样式，以使其显示更加美观。CSS代码如下：

#preview {
  display: flex;
  flex-wrap: wrap;
}

#preview img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin: 10px;
}

以上CSS代码中，我们使用了flex布局，使图片能够自动换行。每张图片使用了一个宽高为150px的正方形框并使用了object-fit: cover将图片填满框体，使其显示效果更加美观。

示例说明

下面提供两个示例代码，分别为使用jQuery和Vue.js实现上传图片预览功能。

示例1：使用jQuery实现

HTML部分

<input type="file" multiple id="upload">
<div id="preview"></div>

JS部分

$("#upload").on("change", function() {
  var preview = $("#preview");
  $.each(this.files, function() {
    var reader = new FileReader();
    var file = this;
    reader.onload = function(e) {
      $("<img>").attr({
        "src": e.target.result,
        "title": file.name
      }).appendTo(preview);
    }
    reader.readAsDataURL(file);
  });
});

在示例1中，我们使用了jQuery的选择器和each方法，来遍历文件数组，并且使用jQuery的方式向DOM中添加img元素实现预览图片功能。

示例2：使用Vue.js实现

HTML部分

<div id="app">
  <input type="file" multiple v-on:change="previewImages">
  <div id="preview">
    <img v-for="(img, index) in images" v-bind:key="index" v-bind:src="img">
  </div>
</div>

Javascript部分

new Vue({
  el: '#app',
  data: {
    images: [],
  },
  methods: {
    previewImages: function(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      var vm = this;
      for (var i = 0; i < files.length; i++) {
        var reader = new FileReader();
        reader.onload = function(e) {
          vm.images.push(e.target.result);
        };
        reader.readAsDataURL(files[i]);
      }
    }
  },
});

在示例2中，我们使用Vue.js提供的v-on指令来监听文件选择框的change事件。在previewImages方法中，我们使用了Vue.js提供的数据绑定功能，将选择的图片文件转换为Data URL，并存储在images数组中。最终，使用了Vue指令v-for来遍历images数组，动态生成预览图片的img标签。

至此，我们已经实现了使用原生HTML、CSS和JavaScript以及jQuery、Vue.js框架实现上传图片预览功能的完整攻略。