html5读取本地文件 图片上传 示例代码

这篇文章主要介绍了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=""> 


从样式上说应不显示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) 
}); 
});