javascript - html5 多图片上传
習慣沉默
習慣沉默 2017-05-16 13:02:56
0
3
509

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

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

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

習慣沉默
習慣沉默

Antworte allen(3)
刘奇

我觉得是这样:

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

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

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

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

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

滿天的星座

多图就是吧元素放到数组里 一起传

阿神

就是放在了数组里一起传 使用了file

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage