jQuery:[1]实现图片上传并预览
原理
预览思路
1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL；
2.把对象URL赋值给实现写好的img标签的src属性
File对象
File对象可以用来获取文件的信息，还可以用来读取这个文件的内容，通常情况下，File对象是来自用户在一个input元素上选择文件后返回的FileList对象，也可以是来自由拖放操作生成的DataTransfer对象。
Blob对象
Blob对象是一个包含由只读原始数据的类文件对象，Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基本Blob，继承了Blob的功能，并且扩展了支持用户计算机上的本地文件，我们想要得到的对象URL实际上就是从Blob这个对象获取的。
实例
代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????<script src="jquery-2.1.4.js"></script> 8 ????<title>Document</title> 9 </head>10 <body>11 ????<input id="upload" type="file">12 ????<img id="preview" src="">13 ????<script>14 ????????$(‘#upload‘).change(function(){15 ????????????var obj = document.getElementById(‘upload‘).files[0];16 ????????????var asrc = window.URL.createObjectURL(obj);17 ????????????document.getElementById("preview").src = asrc;18 ????????})19 ????</script>20 </body>21 </html>效果
jQuery:[1]实现图片上传并预览
原文地址：https://www.cnblogs.com/MrSaver/p/8391561.html