原生射流研究…文件阅读器对象实现图片上传本地预览效果

本文实例为大家分享了射流研究…实现图片上传本地预览效果的具体代码，供大家参考，具体内容如下

！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；宽度宽度：200像素高度：40 pxborder:1px固体# ccc}。ob { background : # cccpadding :10 px }。imgbox img { height:100px宽度width :100 pxmargin 336010 px }/style/head body div class=' ob ' id=' od ' draggable=' true '输入类型=' file ' id=' file ' multiple=' multiple '/div class=' imgbox '/div script//获取文件全球资源定位器(Uniform Resource Locator)函数createObjectURL(blob){ if(window .URL){ 0返回窗口网址。CreateObjectURl(blob)；} else if(窗口。webkiturl){返回窗口。webkiturl。createobjecturl(blob)；} else { return null } } var box=document。queryselector(' .imgbox’)；//显示图片box var文件=文档。query selector(' # file ')；//文件对象var DOM片段=文档。createdocumentfragment()；//文档流优化多次改动dom /触发选中文件事件文件。onchange=function(e){ box。innerHTMl=//清空上一次显示图片效果e=e ||事件；var文件=this.files//获取选中的文件对象for(var i=0，len=file.length我透镜；I){ var imgTag=文档。创建元素(' img ')；var fileName=文件[i].姓名；//获取当前文件的文件名var url=createObjectURL(文件[I])；//获取当前文件对象的网址/忽略大小写var jpg=(fileName.indexOf(' .jpg ')-1)| |(文件名。tolowercase().索引Of(' .jpg ')-1)；var png=(fileName.indexOf(' .png ')-1)| |(文件名。tolowercase().索引Of(' .png ')-1)；var jpeg=(fileName.indexOf(' .JPEG ')-1)| |(文件名。tolowercase().索引Of(' .JPEG ')-1)；//判断文件是否是图片类型if(jpg | | png | | JPEG){ imgtag。src=URLDOM片段。append child(IMgtag)；}else{ alert('请选择图片类型文件!');} } //最佳显示盒子。appendchild(DOM片段)；}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。