1. 程式人生 > >html5獲取本地檔案

html5獲取本地檔案

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>