html5怎么讀取本地文件

這篇文章主要介紹了html5怎么讀取本地文件的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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="">

從樣式上說應(yīng)不顯示input元素的輸入框，這時需將input設(shè)置為透明樣式，然后將其覆蓋到button元素上方，這時方可實現(xià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)容就介紹到這里，感謝各位的閱讀！相信大家對“html5怎么讀取本地文件”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。