原生js FileReader对象实现图片上传本地预览效果
程序员文章站
2022-11-26 14:53:12
本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下
本文实例为大家分享了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> <div class="ob" id="od" draggable="true"> <input type="file" id="file" multiple="multiple"> </div> <div class="imgbox"></div> <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+HTML5 FileReader实现文件上传前本地预览功能
-
原生js FileReader对象实现图片上传本地预览效果
-
JS+HTML5实现上传图片预览效果完整实例【测试可用】
-
JavaScript使用FileReader实现图片上传预览效果
-
vue.js 实现图片本地预览 裁剪 压缩 上传功能
-
html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
-
JavaScript使用FileReader实现图片上传预览效果
-
JS中利用FileReader实现上传图片前本地预览功能
-
jQuery实现的上传图片本地预览效果简单示例
-
利用JS+HTML5实现图片上传预览效果(实例)