javascript - html5 多图片上传

问题描述

问 题

是这样的我下了个demo，是jquery里面多个图片上传的。但是不懂他的实现思路。

主要就是想知道他这种将图片上传到页面，然后点一下开始上传就统一上传是怎么实现的，有劳大神们帮我大致理一下思路。

这个demo的在线演示的链接http://www.jq22.com/yanshi1604。

解决方案

我觉得是这样：

1. file 属性的 input 标签可以选择文件。

2. 选择文件之后，通过 input 的 files 属性访问到 FileList 对象，里面包含文件最近改动时间、文件名、文件大小以及文件类型等信息。在这里可以限制传输文件的大小。上面 demo 中应该就是通过文件名比对来防止上传相同文件。

3. 利用 FileReader 对象的 readAsDataURL() 方法获取到图片对应的 base64 编码，然后在方框中创建 img 元素，src 属性值为这个 base64，就实现了图片预览功能。

4. 点击上传按钮之后通过 AJAX 上传到后台。

比较完整的总结可以看这篇文章。稍微简单的总结可以看我总结的笔记。

这篇关于javascript - html5 多图片上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！