uploadPreview js插件实现图片上传预览功能原理

最新推荐文章于 2024-09-12 11:04:56 发布

wjwisme

最新推荐文章于 2024-09-12 11:04:56 发布

阅读量3.4k

点赞数 1

分类专栏： javascript 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/wjw521wjw521/article/details/80181205

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要实现图片上传预览功能，在上传到服务器之前，可以先预览一下待上传图片，然后决定是否上传。

插件使用很简单，引入插件js就可以。说一下原理，原理清楚，插件不插件也就没关系了。

示例如下（注：为了简便，引入了jquery,找一份jquery文件放在该测试html文件相同目录下即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript" src="./jquery.js"></script>

 <body>
  <input id="upload" type="file"  >
  <img id="preview">
 </body>
 <script type="text/javascript">
$('#upload').change(function(){
   var imageFile = document.getElementById('upload').files[0];//image file对象
	var src = window.URL.createObjectURL(imageFile);//获取图片地址
	//alert(src);
	document.getElementById('preview').src = src;//为图片src赋值
});


</script>
</html>

原理很简单，就三行javascript代码：

var imageFile = document.getElementById('upload').files[0];//从file控件获取file对象
var src = window.URL.createObjectURL(imageFile);//根据file对象解析出图片资源url地址
document.getElementById('preview').src = src;//将解析出的url赋给img的src，该src为blob类型

核心知识点见如下：

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

如有错误，欢迎指正

end