使用浏览器File API, 即可读取本地图片,
使用FileReader即可预览图片,
使用FormData以及XMLHttpRequest对象即可上传图片
选择图片
首先要有个input
1 | <label for="input">选择图片</label> |
其中multiple
可以多选, PC端(需要按shift
键), 及IOS是没问题的, 但安卓机普遍仍然是单选的.
accept
限定了所选文件的类型, 上面的写法表示只能选择图片. 当然也可以使用accept="image/*"
, 不过这种写法有可能会让文件选择框出现的慢一点
然后可以在onSelectFile
回调中获取FileList
对象
1 | onSelectFile (files) { |
要注意的是FileList
是个对象, 虽然有length
属性, 但不是数组, 不能使用forEach等方法来遍历
一个文件, 就files[0]
来获取; 多个文件的话, 老老实实用for循环就好了
另外, 还可以选择文件夹,<input type="file" directory webkitdirectory/>
不过只在谷歌及火狐有效
文件上传
1 | var formData = new FormData() |
上面的写法是一个请求上传一张图片, 如果多张图片, for循环就好了.
但多张图片的话, 如何知道何时全部上传成功?
一个笨方法是使用定时器, 定时检查已上传成功的图片数量是否与已选择的图片数量相等, 如果相等, 说明全部上传成功.
1 | let int = setInterval(() => { |
如果想知道上传进度, 可以监听XMLHttpRequest.upload
属性的progress
方法
1 | xhr.upload.onprogress = function (event) { |
文件预览
1 | let reader = new FileReader(), |