上传图片实时预览

happyfish 发布于2019-08-02 10:06 / 1273人阅读

摘要：引入当使用上传图片文件时，如何在上传到服务器之前，在本地进行预览对象对象允许应用程序异步读取用户计算机上的文件。

引入

当使用上传图片文件时，如何在上传到服务器之前，在本地进行预览？

FileReader 对象

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

let fileReader = new FileReader();

属性

error：在读取时发生的错误

readyState：fileReader当前状态

result：读取到的文件内容，只有在读取操作完成后有效

方法

abort()：终止读取操作

readAsDateURL()：读取文件中的内容，读取完成后调用onloadend方法，结果result中包含一个data:URL格式的字符串表示文件内容（针对图片就是base64格式的字符串）

事件处理程序

onabort：读取被终止时被调用

onerror：读取错误时调用

onload：读取成功时调用

onloadend：读取完成时调用，无论成功失败，在onload或onerror后调用

onloadstart：读取开始前调用

onprogress：读取过程中周期调用、

兼容性

使用FileReader对象预览图片

在的onchange事件中获取上传的图片对象

使用的event.target.files获取上传对象的类数组对象，每一项的name属性对应文件名

中增加multiple属性，上传多个文件

创建FileReader对象，并通过readAsDateURL()方法，传入要预览的文件对象，在onload回调函数中对FileReader对象的result进行处理

代码：

预览多张图片

拖拽预览

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

在拖放过程中会触发的事件：

在源元素上触发的事件（需要设置 draggable 属性）

ondragstart：开始拖动时触发

ondrag：拖动时触发

ondragend：拖动完成时触发

释放时触发的事件

ondragenter：进入容器范围时触发

ondragover：拖动时触发（触发间隔350毫秒）

ondragleave：离开容器范围时触发

ondrop：拖动过程中，释放鼠标按键时触发

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

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 事件中触发上面的函数就可以实现图片预览了。注意，`input 的 onchange 事件获取文件对象是 e.target.files，而 drop 事件则是 e.dataTransfer.files

window.URL.createObjectURL()

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

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

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

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

区别

由于 URL.createObjectURL() 是浏览器自身的接口，貌似性能会更好一点

并且可能比fileReader对IE的兼容性好一些，问题少一些？

不过可以二者选择使用吧，多一个选择不是坏事

参考

MDN FileReader

js图片前端预览之 filereader 和 window.URL.createObjectURL

图片上传预览（URL.createObjectURL）

chrome拖拽不响应ondrop和dataTransfer.setData事件

JavaScript实现拖拽预览，AJAX小文件上传

菜鸟教程 ondrop 事件

云服务器 GPU云服务器 php 预览上传图片上传图片预览php 图片上传服务器并预览 webrtc 实时预览

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52124.html

上传图片实时预览

摘要：引入当使用上传图片文件时，如何在上传到服务器之前，在本地进行预览对象对象允许应用程序异步读取用户计算机上的文件。引入当使用上传图片文件时，如何在上传到服务器之前，在本地进行预览？ FileReader 对象 FileReader对象允许Web应用程序异步读取用户计算机上的文件。使用new创建一个FileReader实例对象： let fileReader = new FileRea...

sourcenode 2019-08-22 16:00 评论0 收藏0
移动端上传图片翻转的解决方案

摘要：后续过了几天，公司购置了几台全新的测试机，测试同学将系统在一台三星的机子上一测，又发现新问题了选择完图片进行本地预览时，发现图片翻转了但上传后再展示又是正常的。最近在处理移动端选择图片实时预览并上传时遇到一个问题：上传前图片预览正常，但上传到服务器上的图片展示到页面上时，有时会出现图片翻转的问题，一般是翻转 90 度。后经一翻研究找到了问题所在，特在此记录一下。问题描述接上面提到...

shinezejian 2019-08-19 17:15 评论0 收藏0
vue-avatar-tailor，vue头像裁剪组件

摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。项目简介本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖使用九宫格进行裁剪，自由选择裁剪区域。实时预览裁剪后效果。可以将裁剪好的图片，...

imccl 2019-08-23 12:13 评论0 收藏0
图片上传知识点梳理

摘要：在日常项目开发中，图片上传是一个十分常见的场景。在图片拖拽上传这个业务场景中，被拖拽元素为页面外部的图片文件，故此处仅用到目标元素的各个事件。具体实现代码如下至此，图片上传的常用知识点以梳理完毕，欢迎补充。在日常项目开发中，图片上传是一个十分常见的场景。而现在的各种UI框架都提供了自己的上传组件，网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件，然而对于其具体的...

Pink 2019-08-02 11:55 评论0 收藏0
图片上传知识点梳理

摘要：在日常项目开发中，图片上传是一个十分常见的场景。在图片拖拽上传这个业务场景中，被拖拽元素为页面外部的图片文件，故此处仅用到目标元素的各个事件。具体实现代码如下至此，图片上传的常用知识点以梳理完毕，欢迎补充。在日常项目开发中，图片上传是一个十分常见的场景。而现在的各种UI框架都提供了自己的上传组件，网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件，然而对于其具体的...

Astrian 2019-08-23 12:49 评论0 收藏0