html5如何读取本地文件

这篇文章给大家分享的是有关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如何读取本地文件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！