html5獲取本地檔案
阿新 • • 發佈:2019-02-02
html5可以獲取瀏覽器本地檔案,但是為了安全起見,需要本地使用者的確定,才可以開啟,而不能通過js去自動開啟,另外,不允許獲取檔案的絕對路徑。
1. 獲取檔名字:
function showFileName() { // Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { // All the File APIs are supported. } else { alert('The File APIs are not fully supported in this browser.'); } //get the file name var a=document.getElementById("filePicker").value; a=a.split("\\"); var filename = a[a.length-1]; }
<a href="javascript:;" class="file">
<span style="white-space:pre"> </span><input onchange="javascript:showFileName()" type="file" name="file" id="filePicker" multiple />
</a>
2. 獲取檔案內容:
function showFile() { // Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { // All the File APIs are supported. } else { alert('The File APIs are not fully supported in this browser.'); } <span style="white-space:pre"> </span>var reader = new FileReader(); <span style="white-space:pre"> </span>reader.onload = function() <span style="white-space:pre"> </span>{ <span style="white-space:pre"> </span>//alert(this.result); <span style="white-space:pre"> </span>document.getElementById("div1").innerHTML = this.result; <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>var f = document.getElementById("filePicker").files[0]; <span style="white-space:pre"> </span>reader.readAsText(f); }
<a href="javascript:;" class="file">
<input type="file" name="file" id="filePicker" multiple />
</a>
<input type="button" value = "顯示" onclick="showFile()"/>
<div id = "div1">
</div>