这篇文章主要介绍了html5引用本地文件的具体实现，html结构样式，Css样式及js代码如下，需要的朋友可以看看哦

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）

}）;

}）;