本文实例为大家分享了js实现图片上传本地预览效果的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
.ob{background:#ccc;padding:10px;}
.imgbox img{height:100px;width:100px;margin:10px;}
</style>
</head>
<body>
<p class="ob" id="od" draggable="true">
<input type="file" id="file" multiple="multiple">
</p>
<p class="imgbox"></p>
<script>
//获取文件url
function createobjecturl(blob){
if (window.url){
return window.url.createobjecturl(blob);
} else if (window.webkiturl){
return window.webkiturl.createobjecturl(blob);
} else {
return null;
}
}
var box = document.queryselector(".imgbox"); //显示图片box
var file = document.queryselector("#file"); //file对象
var domfragment = document.createdocumentfragment(); //文档流优化多次改动dom
//触发选中文件事件
file.onchange = function(e){
box.innerhtml =""; //清空上一次显示图片效果
e = e || event;
var file = this.files; //获取选中的文件对象
for(var i = 0, len = file.length; i < len; i++){
var imgtag = document.createelement("img");
var filename = file[i].name; //获取当前文件的文件名
var url = createobjecturl(file[i]); //获取当前文件对象的url
//忽略大小写
var jpg = (filename.indexof(".jpg") > -1) || (filename.tolowercase().indexof(".jpg") > -1);
var png = (filename.indexof(".png") > -1) || (filename.tolowercase().indexof(".png") > -1);
var jpeg = (filename.indexof(".jpeg") > -1) || (filename.tolowercase().indexof(".jpeg") > -1);
//判断文件是否是图片类型
if(jpg || png || jpeg){
imgtag.src = url;
domfragment.appendchild(imgtag);
}else{
alert("请选择图片类型文件！");
}
}
//最佳显示
box.appendchild(domfragment);
}
</script>
</body>
</html>
以上就是原生js filereader对象的详细介绍的详细内容。