html5中如何讀取本地文件

這篇文章將為大家詳細(xì)講解有關(guān)html5中如何讀取本地文件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

代碼如下:

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

從樣式上說應(yīng)不顯示input元素的輸入框，這時(shí)需將input設(shè)置為透明樣式，然后將其覆蓋到button元素上方，這時(shí)方可實(shí)現(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)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。