上传图片实时预览

引入

当使用上传图片文件时&＃xff0c;如何在上传到服务器之前&＃xff0c;在本地进行预览&＃xff1f;

FileReader 对象

FileReader对象允许Web应用程序异步读取用户计算机上的文件。使用new创建一个FileReader实例对象&＃xff1a;

let fileReader &＃61; new FileReader();

属性

error&＃xff1a;在读取时发生的错误
readyState&＃xff1a;fileReader当前状态
result&＃xff1a;读取到的文件内容&＃xff0c;只有在读取操作完成后有效

方法

abort()&＃xff1a;终止读取操作
readAsDateURL()&＃xff1a;读取文件中的内容&＃xff0c;读取完成后调用onloadend方法&＃xff0c;结果result中包含一个data:URL格式的字符串表示文件内容&＃xff08;针对图片就是base64格式的字符串&＃xff09;

事件处理程序

onabort&＃xff1a;读取被终止时被调用
onerror&＃xff1a;读取错误时调用
onload&＃xff1a;读取成功时调用
onloadend&＃xff1a;读取完成时调用&＃xff0c;无论成功失败&＃xff0c; 在onload或onerror后调用
onloadstart&＃xff1a;读取开始前调用
onprogress&＃xff1a;读取过程中周期调用、

兼容性

使用FileReader对象预览图片

在的onchange事件中获取上传的图片对象
使用的event.target.files获取上传对象的类数组对象&＃xff0c;每一项的name属性对应文件名
中增加multiple属性&＃xff0c;上传多个文件
创建FileReader对象&＃xff0c;并通过readAsDateURL()方法&＃xff0c;传入要预览的文件对象&＃xff0c;在onload回调函数中对FileReader对象的result进行处理

代码&＃xff1a;

预览多张图片

拖拽预览

不通过点击事件而是通过将图片拖拽到指定区域实现预览。

在拖放过程中会触发的事件&＃xff1a;

在源元素上触发的事件&＃xff08;需要设置 draggable 属性&＃xff09;
- ondragstart&＃xff1a;开始拖动时触发
- ondrag&＃xff1a;拖动时触发
- ondragend&＃xff1a;拖动完成时触发
释放时触发的事件
- ondragenter&＃xff1a;进入容器范围时触发
- ondragover&＃xff1a;拖动时触发&＃xff08;触发间隔350毫秒&＃xff09;
- ondragleave&＃xff1a;离开容器范围时触发
- ondrop&＃xff1a;拖动过程中&＃xff0c;释放鼠标按键时触发

显然这里需要使用的是 ondrop 事件&＃xff0c;但是需要注意&＃xff0c;使用ondrop 事件需要阻止浏览器默认行为&＃xff0c;否则不会触发

document.addEventListener("drop", function(e) { //释放e.preventDefault(); }); document.addEventListener("dragenter", function(e) { //拖进e.preventDefault(); }); document.addEventListener("dragleave", function(e) { //拖离e.preventDefault(); }); document.addEventListener("dragover", function(e) { //拖来拖去e.preventDefault(); });

然后在 ondrop 事件中触发上面的函数就可以实现图片预览了。注意&＃xff0c;&＃96;input 的 onchange 事件获取文件对象是 e.target.files&＃xff0c;而 drop 事件则是 e.dataTransfer.files

`window.URL.createObjectURL()`

也可以通过这个方法来实现图片的预览

URL.createObjectURL() 静态方法会创建一个 DOMString&＃xff0c;这个新的URL 对象表示指定的 File 对象或 Blob 对象。

在每次调用 createObjectURL() 方法时&＃xff0c;都会创建一个新的 URL 对象&＃xff0c;即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时&＃xff0c;每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们&＃xff0c;但是为了获得最佳性能和内存使用状况&＃xff0c;你应该在安全的时机主动释放掉它们。

// 使用 createObjectURL function preview2(files) {Object.keys(files).forEach(function(file) {img.src &＃61; window.URL.createObjectURL(files[file]);}) }