2017.11.15-学习笔记：简单实现图片预览及拖拽图片预览

前言：图片上传是一个普通不过的功能，而图片预览就是就是上传功能中必不可少的子功能了，为了减轻后台服务器的工作量，这里使用HTML5的FileReader来实现图片预览。

FileReader

1.构造方式：var fr = new FileReader();

2.属性（这里用到）：

result：表示读取到的内容，只读；

3.方法（这里用到）：

readAsDataURL：读取数据；

4.事件（这里用到）：

load：读取数据成功后触发

图片预览功能

步骤：

1.给 input 注册 change 事件
2.获取文件
var file = input.files[0];
3.创建文件读取器
var fr = new FileReader();
4.调用方法读取文件
fr.readAsDataURL( file );
5.等待读取完成 load 事件

fr.addEventListener("load",function(){
  //fr.result 是base64 图片字符串，可以直接当图片使用
});

代码：

文件预览.jpg

图片拖拽预览功能

文件拖拽

1.设置属性：draggable="true";--img 和 a 默认为true
2.事件：使用时清除浏览器默认行为e.preventDefault();img 默认会被浏览器打开
dragover 当拖拽元素停留在 目标元素上面的时候触发 (以鼠标为基准)
drop 扔下来, 当拖拽元素在 目标元素上面 松开鼠标的时候触发

代码

拖拽图片预览.jpg

直接从桌面把图片拖拽进浏览器，大图为body背景，小图为盒子内图片

---

Knowledge changes the mind