利用html5实现上传图片预览

在HTML5中，通过FileReader可以轻松的实现这个功能。

只要在<input type="file" />文件表单元素中监听 onchange 事件，然后通过FileReader读取图片文件，然后将读取的内容在<img>中显示即可。

实现代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="author" content="EdieLei" />
<title>HTML5 图片上传预览</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){$('#img').change(function(){var file = this.files[0];    //选择上传的文件var r = new FileReader();r.readAsDataURL(file);    //Base64$(r).load(function(){$('div').html('<img src="'+ this.result +'" alt="" />');});});
});
</script>
</head>
<body>
<h3>HTML5 图片上传预览</h3>
<input id="img" type="file" accept="p_w_picpath/*" /><br />
<div></div>
</body>
</html>

参考资料： html5实现上传图片预览 http://www.studyofnet.com/news/856.html

转载于:https://blog.51cto.com/studyofnet/1683530

利用html5实现上传图片预览相关推荐

上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
HTML5 上传图片预览
html5出现之前如果需要上传图片预览一般都是先上传到服务器然后远程预览 html5出现之后有个filereader 解决了这问题 //选中图片之后$("#fileAddPic&qu ...
html元素拖拽预览图,HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blo ...
input file上传图片预览
下载地址http://download.csdn.net/detail/cometwo/9383602 兄弟文章:http://blog.csdn.net/libin_1/article/detail ...
h5 调起相机_h5 调用相机、相册实现本地上传图片预览
h5 本地上传图片预览源码下载最近做了一个项目就是上传一张自拍照, 根据颜值测试出不同的答案,并且可以生成一张图片. 拿到这需求的时候第一个反应就是想到了利用微信的图片上传接口, 因为我们需要拿到 ...
上传图片预览并在后台处理
<a class="a-upload"><input type="file" name="fpic1" onchange= ...
anguarjs 上传图片预览_JS控制上传图片个数，预览上传图片
一共是2个函数 //这个函数的作用预览上传的图片 function fileView(filesObj){ //显示上传图片预览 var view=document.querySelector(&qu ...
html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能
html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...

利用html5实现上传图片预览

利用html5实现上传图片预览相关推荐

最新文章

热门文章