HTML5读取本地文件的示例代码

本文主要介绍HTML5读取本地文件、html结构样式、CSS样式和js代码的具体实现如下。

html结构样式如下所示：

复制代码代码如下所示：

添加图片

从样式上，我们不应该显示输入元素的输入框。然后我们需要将输入设置为透明样式，然后将其覆盖到按钮元素的顶部。然后我们可以点击按钮上传图片。接受的设置为图片，图片类文件只允许上传。

CSS样式如下

复制代码代码如下所示：
addpic {。
职位：相对；
左：100px保证金；
宽度：95px；
身高：30px；
}
{。addlo
背景：没有重复滚动00 RGBA（0, 0, 0，0）；
光标：指针；
字体大小：30px；
不透明性：0；
位置：绝对；
权利：0；
顶部：0；
Z指数：10；
}

JS代码

复制代码代码如下所示：
功能readfiles（EVT）{
var文件= evt.target.files；
如果（！文件）{
console.log（文件无效）；
返回；
}
对于（var i = 0，文件；文件=文件}；i + +）{
无功imgele =新的图像（）；
VaR的定义= window.url.createobjecturl（文件）；
Imgele。src=定义；
Imgele。指针函数（）{
$（# showlo ）Attr（src。
}
}
}
复制代码代码如下所示：
$（文档）Ready（函数（）{）
$（# loimg）。变化（功能（e）{
readfiles（E）
}）；
}）；