免费互动小程序_基于JavaScript完成本地图片预览

基于JavaScript实现本地图片预览       这篇文章主要为大家详细介绍了基于JavaScript实现本地图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如 br , input , hr 等等这样的标签都是符合语法的. 在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成 br / , input / , hr / html head meta charset="utf8" style input[type=radio] { /* 按钮与文字对齐 */ vertical-align:middle; input[type=file] { display: block; #img { width: 200px; height: 200px; border: 1px solid black; margin-top: 10px; /style /head body input type="radio" name="previewType" value="fileReader" onChange="onPreviewTypeChange()" fileReader input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()" createURL input type="file" id="imgFile" onChange="imgChange()" value="test.jpg" img id="img" script var previewTypes = document.getElementsByName("previewType"); var imgFile = document.getElementById("imgFile"); var img = document.getElementById("img"); function getPreviewType() { for(var i=0; i previewTypes.length; i++) { if(previewTypes[i].checked) { return previewTypes[i].value; function onPreviewTypeChange() { imgChange(event.target.value); function imgChange(type) { img.src = ""; var files = imgFile.files; console.log(files); if(!files || files.length === 0) { return; var file = files[0]; if(!type) { type = getPreviewType(); if(!type) { return; switch(type) { case "fileReader": var fr = new FileReader(); fr.onload = function(progressEvent) { console.log(progressEvent); img.src = progressEvent.target.result; fr.readAsDataURL(file); break; case "createURL": img.onload = function() { //释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。 URL.revokeObjectURL(img.src); img.src = URL.createObjectURL(file); break; /script /body /html

fileReader.readAsDataURL

URL.createObjectURL

可以看出URL实质上是以“blob:”打头的,后面跟着32位的UUID(8-4-4-4-12)的结构。

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