Красимир Цонев имеет отличное решение, которое преодолевает все проблемы. Его метод не требует использования eval, поэтому никаких проблем с производительностью и безопасностью не существует. Он позволяет вам установить строку innerHTML, содержащую html с js, и немедленно перевести его на элемент DOM, а также выполнить js-части, существующие вдоль кода. короткий, простой и работает точно так, как вы хотите.
Наслаждайтесь его решением:
http://krasimirtsonev.com/blog/article/Convert-HTML-string- to-DOM-элемент
Важные замечания:
Если пользователь выбирает файл через <input type="file">
, вы можете читать и процесс с помощью файла File API .
Чтение или запись произвольных файлов не допускается по дизайну. Это нарушение песочницы. Из Wikipedia -> Javascript -> Безопасность :
JavaScript и DOM предоставляют злоумышленникам возможность запускать сценарии для запуска на клиентском компьютере через Интернет. Авторы браузера содержат этот риск, используя два ограничения. Во-первых, скрипты выполняются в изолированной среде, в которой они могут выполнять только действия, связанные с веб-сайтом, а не задачи общего назначения, такие как создание файлов.
blockquote>2016 UPDATE: доступ к файловой системе напрямую возможен через API файловой системы , который , поддерживаемый только Chrome и Opera и , может не реализоваться другими браузерами (с исключением Край ). Подробнее см. ответ Кевина .
Просто обновление функций HTML5 http://www.html5rocks.com/en/tutorials/file/dndfiles/ Эта замечательная статья объяснит детализация доступа к локальному файлу в Javascript. Резюме из упомянутой статьи:
Спецификация предоставляет несколько интерфейсов для доступа к файлам из «локальной» файловой системы :
<input type="file" multiple>
или перетащить каталог файлов с рабочего стола). - Изменить -
См. комментарий Пола Д. Уэйта ниже
NW.js позволяет создавать настольные приложения с использованием Javascript без всех ограничений безопасности, обычно размещаемых в браузере. Таким образом, вы можете запускать исполняемые файлы с помощью функции или создавать / редактировать / читать / писать / удалять файлы. Вы можете получить доступ к аппаратным средствам, таким как текущее использование ЦП или общий барабан, и т. Д.
Вы можете создать приложение для Windows, Linux или Mac, которое не требует установки.
Вот структура для NW.js, Universal GUI:
Как уже упоминалось ранее, API-интерфейсы FileSystem и File , а также API FileWriter могут использоваться для чтения и записи файлов из контекст вкладки / окна браузера на клиентскую машину.
Существует несколько вещей, относящихся к API-интерфейсам FileSystem и FileWriter, о которых вы должны знать, некоторые из которых были упомянуты, но заслуживают повторения:
. Вот простые примеры того, как API-интерфейсы используются, прямо или косвенно, в тандеме для выполнения следующих действий:
Запись файла:
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Чтение файла:
bakedGoods.get({
data: ["testFile"],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(resultDataObj, byStorageTypeErrorObj){}
});
Использование необработанного файла, FileWriter и API FileSystem
Запись файла:
function onQuotaRequestSuccess(grantedQuota)
{
function saveFile(directoryEntry)
{
function createFileWriter(fileEntry)
{
function write(fileWriter)
{
var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
fileWriter.write(dataBlob);
}
fileEntry.createWriter(write);
}
directoryEntry.getFile(
"testFile",
{create: true, exclusive: true},
createFileWriter
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Файл чтения:
function onQuotaRequestSuccess(grantedQuota)
{
function getfile(directoryEntry)
{
function readFile(fileEntry)
{
function read(file)
{
var fileReader = new FileReader();
fileReader.onload = function(){var fileData = fileReader.result};
fileReader.readAsText(file);
}
fileEntry.file(read);
}
directoryEntry.getFile(
"testFile",
{create: false},
readFile
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Хотя API-интерфейсы FileSystem и FileWriter больше не соответствуют стандартам трек, их использование может быть оправдано в некоторых случаях, на мой взгляд, потому что:
Однако, если «некоторые случаи» охватывают ваши собственные, вы должны решить.
* BakedGoods поддерживается не кем иным, как парень прямо здесь:)
FSO.js обертывает новый API-интерфейс HTML5 FileSystem, который стандартизован W3C и предоставляет чрезвычайно простой способ читать, записывать или перемещать локальную изолированную Файловая система. Это асинхронно, поэтому файл IO не будет мешать работе пользователя. :) [/ Д2]
, предполагая, что любой файл, который может понадобиться js, должен быть разрешен непосредственно пользователем, создатели известных браузеров вообще не допускают файлы доступа к javascript.
Основная идея решения: javascript не может получить доступ к файлу, указав его локальный URL. но он может использовать файл, имея его DataURL: поэтому, если пользователь просматривает файл и открывает его, js должен получить «DataURL» непосредственно из HTML вместо получения «URL».
Затем он превращает DataURL в файл, используя функцию readAsDataURL и объект FileReader. источник и более полное руководство с хорошим примером:
, если вы используете angularjs & amp; aspnet / mvc, чтобы получить json-файлы, вы должны разрешить тип mime в web config
blockquote><staticContent> <remove fileExtension=".json" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent>
UPDATE Эта функция удаляется с Firefox 17 (см. https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).
Вкл. Firefox, который вы (программист) может сделать это из файла JavaScript:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
, и вам (пользователю браузера) будет предложено разрешить доступ. (для Firefox вам просто нужно делать это один раз при каждом запуске браузера)
Если пользователь браузера - кто-то другой, они должны предоставить разрешение.
Если у вас есть поле ввода, например
<input type="file" id="file" name="file" onchange="add(event)"/>
Вы можете получить файл в формате BLOB:
function add(event){
var userFile = document.getElementById('file');
userFile.src = URL.createObjectURL(event.target.files[0]);
var data = userFile.src;
}
Если вы развертываете в Windows, узел сценария Windows предлагает очень полезный JScript API для файловой системы и других локальных ресурсов. Однако включение сценариев WSH в локальное веб-приложение может быть не таким элегантным, как вы могли бы пожелать.
Если вам нужен доступ ко всей файловой системе на клиенте, чтение / запись файлов, просмотр папок для изменений, запуск приложений, шифрование или подписывание документов и т. д., пожалуйста, посмотрите на JSFS.
Это позволяет безопасный и неограниченный доступ с вашей веб-страницы к ресурсам компьютера на клиенте без использования технологии плагина браузера, такой как AcitveX или Java Applet. Тем не менее, мир программного обеспечения также должен быть установлен.
Для работы с JSFS вы должны иметь базовые знания в разработке Java и Java EE (сервлеты).
Пожалуйста, найдите JSFS здесь: https://github.com/jsfsproject/jsfs . Это бесплатно и лицензировано в GPL