html5中如何讀取本地文件

這篇文章將為大家詳細講解有關html5中如何讀取本地文件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

代碼如下:

<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) 
}); 
});

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