jQuery：[1]实现图片上传并预览

最新推荐文章于 2021-08-18 17:55:58 发布

weixin_30751947

最新推荐文章于 2021-08-18 17:55:58 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MrSaver/p/8391561.html

版权

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>

效果

转载于:https://www.cnblogs.com/MrSaver/p/8391561.html

weixin_30751947

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery：[1]实现图片上传并预览

jQuery:[1]实现图片上传并预览原理预览思路1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL；2.把对象URL赋值给实现写好的img标签的src属性File对象　　File对象可以用来获取文件的信息，还可以用来读取这个文件的内容，通常情况下，File对象是来自用户在一个input元素上选择文件后返回的FileList对象，也可以是来自由拖...
复制链接

扫一扫