这篇文章给大家分享的是有关html5如何读取本地文件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
html结构样式如下：
<div class =“ addpic”>
<button>添加图片</ button>
<form>
<input id =“ logoimg” class =“ addlogo” type =“ file” multiple accept =“ image / *” name =“ logo” >
</ form>
</ div>
<img id =“ showlogo” src =“” alt =“”>
从样式上说应不显示输入元素的输入框，这时需将输入设置为透明样式，然后将其覆盖到按钮元素上方，这时方可实现点击按钮上传图片。将接受的设置为“ image / * ”，则只允许图片类文件上传。Css样式
如下
.addpic {
position：relative;
margin-left：100px;
宽度：95像素；
高度：30像素；
}
.addlogo {
背景：无重复滚动0 0 rgba（0，0，0，0 ）;
光标：指针；
font-size：30px;
不透明度：0；
位置：绝对；
正确：0；
最高：0;
z索引：10；
}
js代码
函数readFiles（evt）{
var files = evt.target.files;
if（！files）{
console.log（“文件已入侵”）;
返回;
}
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如何读取本地文件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
