Пример кода для чтения локальных файлов с помощью JavaScript

Как использовать браузер для просмотра локальных файлов?

Тема сегодняшнего разговора - использование браузера для просмотра локальных файлов.

Из-за ограничений безопасности браузера, скрипты JavaScript не могут свободно доступ к локальным ресурсам, это правило, которое необходимо соблюдать для безопасности информации пользователя. Если скрипты JavaScript на сети могли бы свободно доступ к локальным ресурсам пользователей, то пользователи браузера не могли бы рассчитывать на безопасность. Несмотря на это ограничение, браузер все же может доступ к локальным ресурсам при получении разрешения пользователя.

Метод получения разрешения пользователя через метку для ręcznego wyboru файла, это процесс предоставления пользователем доступа. Затем, используя полученный объект File, преобразуйте его в url с помощью URL.createObjectURL(file), чтобы передать его в использование с тегами, такими как img, video, audio и т.д. Я封装ил функцию преобразования локального файла в url в класс.

function LocalFileUrl(){
 var _this = this;
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
 this.urls = [];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  console.log("change");
  //Если _this.urls не пуст, то освободите url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url); // После освобождения, этот url больше не будет доступен для использования ресурсов
   });
   _this.urls = [];
  }
  $(this.files).each(function(index, file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url:url, file:file});
  });
  typeof _this.getted == 'function' && _this.getted(_this.urls);
 )
}
/*
Описание параметров: getted:function(urls){}
urls - это массив объектов url. [url]
url = {
url:url, // ссылка на файл
файл:file // ссылка на объект выбранного файла
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

Способ использования:

var localFileUrl = new LocalFileUrl(); // Создание объекта
//Инициировать чтение, вызвать диалог выбора файла и监тировать событие выбора файла.  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
)

Переписать с использованием объекта promise jQuery

Преимущество этого метода в том, что можно использовать链овую запись и связать несколько обработчиков событий done, порядок выполнения которых соответствует порядку их привязки.

function LocalFileUrl(){
 this.dtd = {};
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
 this.urls = [];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  //Если _this.urls не пуст, то освободите url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url); // После освобождения, этот url больше не будет доступен для использования ресурсов
   });
   _this.urls = [];
  }
  $(this.files).each(function(index, file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url:url, file:file});
  });
  //传入一个可选的 параметр массива
  _this.dtd.resolveWith(window, new Array(_this.urls));
 )
}
/*
возвращает объект promise jQuery, который можно связать с событием done(). done(urls) принимает массив urls
{
 url:url:
 file:file//选择的文件对象
}
*/
LocalFileUrl.prototype.getUrl = function(){
 this.dtd = $.Deferred();
 $("#"+ this.input_id).click();
 return this.dtd.promise();
}

Способ использования

var localFilrUrl = new LocalFileUrl();
// Привязка к событию done
localFileUrl.getUrl().done(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
}).done(function(){
 console.log("Готово");
}).done(function(){
 alert("Прочитан путь к локальному файлу");
)

Совместимость

URL.createObjectURL(File/Blob) - это экспериментальная функция.Совместимость с IE10 и выше. Соответствующий это URL.revokeObjectURL(url), который используется для уведомления браузера о том, что больше не потребуется ссылка на этот URL, и он может быть освобожден. После вызова URL немедленно становится недействительным.

Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не обладает правами собственности, не был обработан вручную, не несет ответственности за соответствующие юридические последствия. Если вы обнаружите спорное содержимое о нарушении авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения сайт немедленно удаляет спорное содержимое.