[英]How can I read a local file when the user presses a button using the HTML5 File API ?
[英]How can I use JavaScript to read a local file when the html is local
我希望能夠讀取與html文件存儲在同一目錄中的文件。 當通過http訪問html文件時,沒有問題。 我可以只使用HttpXMLRequest。 但是,當從本地磁盤上讀取HTML時(與大多數桌面瀏覽器中的File / Open一樣,似乎HttpXMLRequest無法正常工作。我以前是使用Java Applet來完成此操作的,但是(a)我注意到這沒有實現) (b)我想要一個僅使用JavaScript的解決方案:不使用Java,也不使用Flash。
HttpXMLRequest可以發出HTTP請求-沒有Web服務器,這是不可能的,但是設置本地主機服務器並不困難。
盡管我敢肯定還有其他有思想的人會提出其他建議; 如果您未使用默認/預安裝的apache服務器,我更喜歡Windows機器是EasyPHP http://www.easyphp.org/和XAMP。
這是一種將文件讀入javascript的解決方案,但是目前還不清楚,如果您僅限於AJAX樣式請求。 無論如何,如果您不僅限於該方法,則可以使用FileReader 。
以下示例使用readAsDataURL,但您可以使用其他列出的方法之一。
void readAsArrayBuffer(in Blob blob); Requires Gecko 7.0
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob file);
void readAsText(in Blob blob, [optional] in DOMString encoding);
因此,以下示例將加載文件,然后將其轉換為base64並為您顯示結果字符串。
的CSS
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
#display {
width: 500px;
高度:150px; }
的HTML
<input type="file" id="files" name="file" />
<button id="cancel">Cancel read</button>
<div id="progress_bar">
<div class="percent">0%</div>
</div>
<div>Base64 encoded result</div>
<textarea id="display"></textarea>
Java腳本
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global */
(function () {
"use strict";
var reader,
progress = document.querySelector(".percent"),
display = document.getElementById("display"),
iFiles = document.getElementById("files"),
bCancel = document.getElementById("cancel"),
dropZone = document.getElementById("drop_zone"),
filebox = document.getElementById("filebox"),
list = document.getElementById("list");
function abortRead() {
if (reader) {
reader.abort();
}
}
function errorHandler(evt) {
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert("File Not Found!");
break;
case evt.target.error.NOT_READABLE_ERR:
alert("File is not readable");
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert("An error occurred reading this file.");
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + "%";
progress.textContent = percentLoaded + "%";
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = "0%";
progress.textContent = "0%";
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function (e) {
alert('File read cancelled');
};
reader.onloadstart = function (e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function (e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = "100%";
progress.textContent = "100%";
setTimeout("document.getElementById('progress_bar').className='';", 2000);
display.value = e.target.result;
}
// Read in the image file as a binary string.
reader.readAsDataURL(evt.target.files[0]);
}
iFiles.addEventListener("change", handleFileSelect, false);
bCancel.addEventListener("click", abortRead, false);
}());
更新:從W3C File API-工作草案
該規范允許Web內容從底層文件系統讀取文件,並提供一種通過唯一標識符訪問文件的方式,因此要考慮到一些安全方面的考慮。 本規范還假設主要的用戶交互是與HTML表單[HTML]的元素進行交互,並且FileReader對象正在讀取的所有文件都已由用戶首先選擇。 重要的安全考慮因素包括:防止惡意文件選擇攻擊(選擇循環),防止訪問系統敏感文件,以及在選擇發生后防止磁盤上文件的修改。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.