Кстати, сегодня я просто просмотрел исходный код прокси -переключателя и приобрел много вещей, включая чтение и сохранение файлов, которые будут представлены в этой статье.
Поскольку Google не предоставляет функцию синхронизации данных плагина, импорт и экспорт конфигураций подключаемых модулей должны быть рассмотрены с файлами. По соображениям безопасности только IE предоставляет API для доступа к файлам; Но с прибытием HTML 5 другие браузеры также поддерживали его.
Во -первых, давайте поговорим о чтении файла. W3C предоставляет некоторые API -интерфейсы, наиболее важным из которых является класс FileReader.
Сначала перечислите теги HTML, которые вам нужны:
Скопируйте код кода следующим образом: <input type = "file" id = "file" onchange = "handlefiles (this.files)"/>
Когда файл выбран, список, содержащий файл (объект FileList), будет передаваться в качестве параметра функции handlefiles ().
Этот объект Filelist аналогичен массиву, который может сообщить количество файлов, а его элементы являются объектом файла.
Из этого объекта файла вы можете получить такие атрибуты, как имя, размер, LastModifiedDate и Type.
Передайте этот объект файла с методом чтения объекта FileReader, и вы можете прочитать файл.
В FileReader есть 4 метода чтения:
1. readasarraybuffer (файл): прочитайте файл в виде Arraybuffer.
2. ReadAsBinaryString (файл): прочитайте файл как двоичную строку
3.ReadAsDataurl (файл): прочитайте файл в качестве URL -адреса данных
4. readaStext (файл, [кодирование]): считывает файл как текст, значение кодирования по умолчанию-«UTF-8»
Кроме того, метод Abort () может прекратить читать файл.
Объект FileReader должен быть обработан после прочтения файла. Чтобы не блокировать текущий поток, API принимает модель событий, которая может зарегистрировать эти события:
1. Anabort: запускается при прерывании
2.Onerror: запускается, когда возникает ошибка
3.Onload: запускается, когда файл успешно прочитал
4.Onloadend: запускается при чтении файла, независимо от того, не удается ли он или нет
5.onloadStart: запускается, когда файл начинает читать
6.OnProgress: периодически триггеры при чтении файла
С этими методами вы можете обработать файлы.
Попробуем сначала прочитать текстовые файлы:
Кода -копия выглядит следующим образом:
Функциональные ручки (файлы) {
if (files.length) {
var file = файлы [0];
var Reader = new FileReader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>'). appendto ('body');
}
reader.readaStext (file);
}
}
}
Это. Здесь на самом деле читатель.
После тестирования вы обнаружите, что содержимое этого файла было добавлено на веб -страницу. Если вы используете Chrome, вы должны поместить веб-страницу на сервер или в плагин, и протокол файла потерпит неудачу.
Давайте снова попробуем изображения, потому что браузер может напрямую отображать изображения протокола DATA URI, поэтому добавьте изображения на этот раз:
Кода -копия выглядит следующим образом:
Функциональные ручки (файлы) {
if (files.length) {
var file = файлы [0];
var Reader = new FileReader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>'). appendto ('body');
}
reader.readaStext (file);
} else if (/image /// w+/. test (file.type)) {
reader.onload = function () {
$ ('<img src = "' + this.result + '" />').ppryendto('body');
}
reader.readasdataurl (файл);
}
}
}
Фактически, вход: управление файлом также поддерживает выбор нескольких файлов:
Кода -копия выглядит следующим образом:
<input type = "file" id = "files" multy = "" onchange = "handlefiles (this.files)"/>
Таким образом, файлы handlefiles () должны быть пройдены в обработчики файлов.
Если вы хотите прочитать только часть данных, файловый объект также имеет методы webkitslice () или mozslice (), которые используются для генерации объектов Blob. Этот объект может быть прочитал FileReader так же, как объект файла. Эти два метода получают 3 параметра: первый параметр является начальной позицией; Второе - это конечная позиция, и при опущенной, конец файла читается; Третий - тип контента.
Примеры, пожалуйста, см. «Чтение локальных файлов в JavaScript».
Конечно, в дополнение к импорту данных и отображению файлов, его также можно использовать для загрузки AJAX. Код может использоваться для обозначения «Использование файлов из веб -приложений».
Далее сохраните файл.
Фактически, файл API: Автор предоставляет 4 интерфейса, но в настоящее время только некоторые браузеры (Chrome 8+ и Firefox 4+) реализуют Blobbuilder, а остальные интерфейсы недоступны.
Для неподдерживаемых браузеров вы можете использовать Blobbuilder.js и Filesaver.js, чтобы получить поддержку.
Я изучил его и обнаружил тайну.
Blobbuilder может создать объект Blob. Передайте этот объект Blob метода url.createObjecturl (), и вы можете получить URL -адрес объекта. И этот URL -адрес объекта является адресом загрузки этого объекта Blob.
После получения адреса загрузки создайте элемент A, назначьте адрес загрузки атрибуту href и назначьте имя файла атрибуту загрузки (поддерживается Chrome 14+).
Затем создайте событие Click и передайте его элементу для обработки, что заставит браузер начать загрузку объекта Blob.
Наконец, используйте url.revokeobjecturl (), чтобы выпустить URL -адрес объекта, уведомляя браузер, что ему не нужно продолжать ссылаться на файл.
Вот упрощенный код:
Кода -копия выглядит следующим образом:
var blobbuilder = blobbuilder || Webkitblobbuilder || Mozblobbuilder;
var url = url || webkiturl || окно;
Функция saveas (blob, filename) {
var type = blob.type;
var force_savable_type = 'application/octet-stream';
if (type && type! = force_savable_type) {// force скачать, а не открыть в браузере
var slice = blob.slice || Blob.webkitslice || blob.mozslice;
blob = slice.call (blob, 0, blob.size, force_savable_type);
}
var url = url.createObjecturl (blob);
var save_link = document.createElementns ('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = имя файла;
var event = document.createevent ('mouseevents');
event.initmouseevent ('Щелкни, верно, false, window, 0, 0, 0, 0, 0, false, false, false, false, false, 0, null);
save_link.dispatchevent (event);
Url.revokeobjecturl (url);
}
var bb = new Blobbuilder;
bb.append («Привет, мир!»);
saveas (bb.getblob ('text/plain; charset = utf-8'), 'hello world.txt');
Текстовый файл будет предложено сохранить во время тестирования. Chrome должен разместить веб-страницы на сервере или в плагин.