Чтение содержимого файла на стороне клиента в JavaScript в различных браузерах
Я пытаюсь предоставить решение только для скрипта для чтения содержимого файла на клиентской машине через браузер.
у меня есть решение, которое работает с Firefox и Internet Explorer. Это не очень красиво, но я только пробую вещи в данный момент:
function getFileContents() {
var fileForUpload = document.forms[0].fileForUpload;
var fileName = fileForUpload.value;
if (fileForUpload.files) {
var fileContents = fileForUpload.files.item(0).getAsBinary();
document.forms[0].fileContents.innerHTML = fileContents;
} else {
// try the IE method
var fileContents = ieReadFile(fileName);
document.forms[0].fileContents.innerHTML = fileContents;
}
}
function ieReadFile(filename)
{
try
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile(filename, 1);
var contents = fh.ReadAll();
fh.Close();
return contents;
}
catch (Exception)
{
return "Cannot open file :(";
}
}
Я могу назвать getFileContents()
и он запишет содержимое в fileContents
текстовой области.
есть ли способ сделать это в других браузерах?
Я на данный момент это касается Safari и Chrome, но я открыт для предложений для любого другого браузера.
Edit: в ответ на вопрос, "почему вы хотите это сделать?":
В основном, я хочу хэшировать содержимое файла вместе с одноразовым паролем на стороне клиента, чтобы я мог отправить эту информацию обратно в качестве проверки.
3 ответов
отредактировано для добавления информации о файле API
так как я изначально написал этот ответ,файл API было предложено в качестве стандарта и реализовано в большинстве браузеров (начиная с IE 10, который добавил поддержку FileReader
API, описанный здесь, хотя еще не File
API-интерфейс). API немного сложнее, чем более старый Mozilla API, поскольку он предназначен для поддержки асинхронного чтения файлов, лучшей поддержки двоичных файлов и декодирование различных текстовых кодировок. Есть некоторая документация, доступная в сети разработчиков Mozilla а также различные примеры онлайн. Вы бы использовали его следующим образом:
var file = document.getElementById("fileForUpload").files[0];
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
document.getElementById("fileContents").innerHTML = evt.target.result;
}
reader.onerror = function (evt) {
document.getElementById("fileContents").innerHTML = "error reading file";
}
}
оригинальный ответ
в WebKit (таким образом, Safari и Chrome) нет способа сделать это. Единственные ключи, которые a
чтобы прочитать файл, выбранный пользователем, используя диалоговое окно открытия файла, вы можете использовать <input type="file">
тег. Вы можете найти информация об этом из MSDN. Когда файл выбран, вы можете использовать API FileReader читать содержание.
function onFileLoad(elementId, event) {
document.getElementById(elementId).innerText = event.target.result;
}
function onChooseFile(event, onLoadFileHandler) {
if (typeof window.FileReader !== 'function')
throw ("The file API isn't supported on this browser.");
let input = event.target;
if (!input)
throw ("The browser does not properly implement the event object");
if (!input.files)
throw ("This browser does not support the `files` property of the file input.");
if (!input.files[0])
return undefined;
let file = input.files[0];
let fr = new FileReader();
fr.onload = onLoadFileHandler;
fr.readAsText(file);
}
<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' />
<p id="contents"></p>
удачи в кодировании!
При возникновении ошибки в Internet Explorer измените параметры безопасности, чтобы разрешить ActiveX
var CallBackFunction = function(content)
{
alert(content);
}
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction);
//Tested in Mozilla Firefox browser, Chrome
function ReadFileAllBrowsers(FileElement, CallBackFunction)
{
try
{
var file = FileElement.files[0];
var contents_ = "";
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function(evt)
{
CallBackFunction(evt.target.result);
}
reader.onerror = function (evt) {
alert("Error reading file");
}
}
}
catch (Exception)
{
var fall_back = ieReadFile(FileElement.value);
if(fall_back != false)
{
CallBackFunction(fall_back);
}
}
}
///Reading files with Internet Explorer
function ieReadFile(filename)
{
try
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile(filename, 1);
var contents = fh.ReadAll();
fh.Close();
return contents;
}
catch (Exception)
{
alert(Exception);
return false;
}
}