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="">

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