html5获取本地文件

来源：互联网发布：买域名一年多少钱编辑：程序博客网时间：2024/06/02 04:15

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 namevar 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>

0 0