JavaScript使用readAsDataUrl方法预览图片
更新时间：2017年05月10日 11:10:20 作者：liuhenghui5201
这篇文章主要为大家详细介绍了JavaScript使用readAsDataUrl方法预览图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了readAsDataUrl方法预览图片的具体代码，供大家参考，具体内容如下
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function filePrevImg(files){
//检测浏览器是否支持FileReader对象
if(typeof FileReader == "undefined"){
alert("您的浏览器不支持FileReader对象！");
}
var strHtml = "";
for(var intI=0;intI<files.length;intI++){
var tmpFile = files[intI];
var reader = new FileReader();//每循环一次都要重新new一个FileReader实例
reader.readAsDataURL(tmpFile);
reader.onload=function(e){
alert(e.target.result);
strHtml += "<img src='"+e.target.result+"' alt=''/>";
$$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
};
}
}
</script>
</head>
<body>
<fieldset>
<legend>使用readAsDataUrl()方法预览图片</legend>
<input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" />
<ul id="prevUpload"></ul>
</fieldset>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript中的对象序列化介绍,JavaScript中的对象序列化是通过JSON.stringify()来实现的,而反序列化则通过JSON.parse()来实现,需要的朋友可以参考下2014-12-12
本文将利用微信小程序制作一个简易的图片处理小工具（自制低配版美图秀秀），有滤镜、效果图和动态滤镜三个功能，快跟随小编一起学习学习吧2022-06-06
自制的文件上传JS控件可支持IE、chrome、firefox etc
这篇文章主要介绍了自制的文件上传JS控件可支持IE、chrome、firefox etc,需要的朋友可以参考下2014-04-04
在js中使用"with"语句中跨frame的变量引用问题...2007-03-03
这篇文章主要介绍了JavaScript插件化开发教程，十分的详细，2015-01-01
这篇文章主要介绍了绝对经典的滑轮新闻显示(javascript+css)实现,需要的朋友可以参考下2007-03-03
对于js 我是个初学者 甚至还不入门，我比较喜欢js做出的特效。2011-07-07
根据分辨率不同，调用不同的css文件...2006-07-07
这篇文章主要介绍了微信小程序后端实现授权登录,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
这篇文章主要介绍了微信小程序实现action-sheet弹出底部菜单功能,结合实例形式分析了action-sheet组件弹出菜单的使用技巧,包括元素遍历、事件响应及属性设置等操作方法,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
最新评论