input多文件上传和显示图片（二）

最新推荐文章于 2023-09-14 23:35:52 发布

Stark6

最新推荐文章于 2023-09-14 23:35:52 发布

阅读量307

点赞数

分类专栏： Vue JavaScript 文章标签： input file

本文链接：https://blog.csdn.net/stark6/article/details/100693851

版权

本文介绍了HTML5中input多文件上传的实现方法，通过监听change事件，利用FormData对象存储files，然后POST到后端。同时，文章还讲解了如何使用FileReader对象获取文件的name、size信息，以及如何在onload事件中获取图片的src进行预览。

摘要由CSDN通过智能技术生成

上文讲到点击input触发change事件，之后在函数中创建formdata对象，for循环将files对象append到formdata对象的file属性中。

let file = e.target.files
// 这里拿到上传的文件
this.file = new FormData()
for(i=0;i<file.length;i++) {
    this.file.append('file', file[0])
}
// 这里循环将文件添加到formdata对象的file属性中去

之后设置hearder，post到后端就可以了。

下面讲讲如何拿到文件的name、size、文件src

let file = e.target.files
// 这样便可以拿到文件的size和name，这里需要注意的是size的单位是B

接下来我们来获取图片的src，HTML5为我们提供了FileReader对象，可以使用他的属性获得文件的src

for(i=0;i<e.targer.files.length;i++) {
    var loader = new FileReader();
    reader.readAsDataURL(e.target.files[i])
    // 这里让浏览器获取到每个文件的url
    readList.push(reader)
    // 这里将reader对象push到一个list里，方便之后循环显示
}

接下来要等到reader.onload的时候在调用每个FileR