JavaScript使用readAsDataUrl方法预览图片
程序员文章站
2022-05-28 18:37:40
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Node.js安装配置图文教程
推荐阅读