这篇文章将为大家详细讲解有关html5中如何读取本地文件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联专注骨干网络服务器租用十年，服务更有保障！服务器租用，
服务器托管雅安 成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。
代码如下:
从样式上说应不显示input元素的输入框，这时需将input设置为透明样式，然后将其覆盖到button元素上方，这时方可实现点击button上传图片。将accepted设置为“image/*”，则只允许图片类文件上传。
Css样式如下
.addpic{ position:relative; margin-left:100px; width:95px; height:30px; } .addlogo { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); cursor: pointer; font-size: 30px; opacity: 0; position: absolute; right: 0; top: 0; z-index: 10; }
js代码
代码如下:
function readFiles(evt){ var files=evt.target.files; if(!files){ console.log("the file is invaild"); return; } for(var i=0, file; file=files[i]; i++){ var imgele=new Image(); var thesrc=window.URL.createObjectURL(file); imgele.src=thesrc; imgele.onload=function(){ $("#showlogo").attr("src",this.src); } } }$(document).ready(function(){
$("#logoimg").change(function(e){
readFiles(e)
});
});关于html5中如何读取本地文件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
名称栏目：html5中如何读取本地文件-创新互联
URL链接：http://bjjierui.cn/article/dpehgi.html
