從樣式上說應(yīng)不顯示input元素的輸入框，這時需將input設(shè)置為透明樣式，然后將其覆蓋到button元素上方，這時方可實現(xiàn)點(diǎn)擊button上傳圖片。將accepted設(shè)置為“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) 
}); 
});

關(guān)于html5中如何讀取本地文件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。