基于Java脚本语言实现本地图片预览

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

！DOCTYPE html！- !DOCTYPE html一定要放在第一行，除非上面都是空行在超文本标记语言规范中，单独存在的标签是不需要使用/来自我关闭的，比如br，输入，hr等等这样的标签都是符合语法的。在可扩展的超文本标记语言规范中，单独存在的标签要按照可扩展置标语言的语法规则进行自我关闭，上面三个标签就应写成br /，input /，hr/- html head meta charset='utf8 '样式输入[type=radio] { /*按钮与文字对齐*/垂直对齐align:middle}输入[type=file]{显示：块；} # img { width: 200px高度： 200像素；border: 1px纯黑；页边距-top : 10px；}/样式/头体输入类型=' radio '名称=' previewType '值=' file reader ' onChange=' onpreview type change()'文件读取器输入类型=' radio '名称=' previewType '值=' createURL ' onChange=' onreviewtype change()' createURL HR输入类型=' file ' id=' imgcchange()' value=' test。jpg ' img id=' img '脚本var previewTypes=document。getelementsbnamevar IMgfile=document。getelementbyid(' IMgfile ')；var img=文档。getelementbyid(' img ')；函数getpreview type(){ for(var I=0；ipreviewtypes . lengthi){ if(preview types[I]).选中){返回预览类型[i].价值；} } }函数onpreview ptychange(){ imgcchange(事件。目标。值)；}函数imgChange(类型){ img . src=var files=IMgfile . files console . log(文件);if(！文件| |文件。length===0){ return；} var file=files[0]；if(！type){ type=GetPreviewtype()；if(！type){ return；} } switch(type){ case ' FileReader ' : var fr=new FileReader()；法郎on load=function(ProgreSevent){ console。日志(ProgreSevent)；img。src=ProgreSevent。目标。结果；} fr.readAsDataURL(文件);打破；案例“createURl”: img。onload=function(){//释放一个之前通过调用URL.createObjectURL()创建的已经存在的统一资源定位器对象。网址。revokeobjecturl(img。src)；} img.src=URL.createObjectURL(文件);打破；} }/script/body/HTMlFileReader。ReadAsDataURl

URL.createObjectURL

可以看出统一资源定位器实质上是以“blob:”打头的，后面跟着32位的UUID(844412)的结构。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。