Front-end война пять подонков интерфейс обучения - FileReader предварительный просмотр локальных файлов

HTML

Прошло почти полтора месяца с момента последнего блога, уже больше месяца немного раздражителен, не могу перестать учиться, не знаю почему, не очень хорошо играю, и Я простудился. Может быть, погода жаркая и немного неспокойная. На прошлой неделе я посмотрел "Нэчжа - Мальчик-демон приходит в мир" и это было неплохо. Я также посмотрел новый "Человек-паук: Экспедиция героев". Я увидел тень Железного человека от Питера Паркера, и я был очень взволнован!

нужно

Почему я сегодня решил написать этот блог о предварительном просмотре локальных файлов, потому что столкнулся с проблемами на работе 😅😅😅

  1. нужно загрузить фотографии
  2. Перед загрузкой изображения вам нужно показать картинку
  3. Предыдущая реализация загрузки изображений заключается в том, чтобы вернуть URL-адрес после успешной загрузки изображения, а затем отобразить изображение в соответствии с URL-адресом.

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

Поиск в Интернете показывает, что сила html5 отражается, и это можно реализовать с помощью собственного API — FileReader.

Метод FileReader

Экземпляр FileReader имеет 4 метода, 3 из которых используются для чтения файла, а другой используется для прерывания чтения (в настоящее время я не использовал этот метод 😃 нет спроса~). На что нам нужно обратить внимание, так это на то, что независимо от того, будет ли чтение успешным или нет, эти методы не будут напрямую возвращать результат чтения, аresultсвойства (будут упомянуты позже)

  1. abortметод, параметрnone, терминал читает
  2. readAsBinaryStringметод, параметрfile, прочитать файл как двоичный код
  3. readAsDataURLметод, параметрfile, прочитать файл как DataURL
  4. readAsTextметод, параметрfile, [encoding], прочитать файл как текст

читать как текст:Этот метод имеет два параметра, где второй параметр — метод кодирования текста, значение по умолчанию — UTF-8. Этот метод очень прост для понимания, файл читается в текстовом режиме, а результатом чтения является содержимое текстового файла.

читать как бинарную строку:Этот метод читает файл как бинарную строку, обычно мы передаем ее бэкенду, а бэкенд может хранить файл через эту строку. (Не используется ниже... неловко...)

readAsDataURL:Этот метод считывает файл как строку, начинающуюся с data:, суть которой — Data URL, представляющий собой схему встраивания небольших файлов непосредственно в документ. Небольшие файлы здесь обычно относятся к файлам в таких форматах, как изображения и html. (На самом деле картинка конвертируется в формат base64)

Событие FileReader

FileReader имеет модель событий, которая обеспечивает весь процесс, поэтому мы можем выполнять нужные нам методы на различных этапах чтения файлов.

  1. onabort, срабатывает при прерывании
  2. onerror, срабатывает при ошибке
  3. onload, срабатывает, когда чтение файла завершается успешно
  4. onloadend, завершение чтения срабатывает независимо от успеха или неудачи
  5. onloadstart, срабатывает, когда начинается чтение
  6. onprogress,Загрузка

Основной процессonloadstart>onprogress>onload>onloadend

давайте использовать

readAsDataURL

Тогда приступим непосредственно к коду⬇️

<input type="file" id="file">
<img src="" alt="" id="img">

Все, что нам нужно сейчас, это то, что мы<input type="file" id="file">Изображения, выбранные на этой вкладке, могут быть загружены ниже без запроса.<img src="" alt="" id="img">отображается на ярлыке

let reader = null; // 声明reader变量方便后面使用

const fileNode = document.querySelector('#file'); // 获取input标签

fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听，当选择文件以后触发
  if (window.FileReader) { // 判断浏览器中有没有FileReader，毕竟现在不是所有浏览器都有FileReader
    reader = new FileReader(); // 实例化FileReader
    reader.onload = (event) => { // 设置读取成功以后执行的方法
      document.querySelector('#img').src = event.target.result; // 前面说过，成功返回的数据再result属性中，然后将这个设置成img标签的src地址
    }
  } else { // 没有FileReader的弹出警告然后返回
    alert('你的先浏览器没有FileReader，不能这么干！');
    return;
  }
  const file = e.target.files[0]; // 拿到选择的文件信息
  reader.readAsDataURL(file); // 将文件信息转成DataUrl，这个就是转成功后执行 reader.onload 方法
})

Таким образом, мы можем просматривать изображения локально, не загружая изображения!

До сих пор мы использовалиreadAsDataURLМетоды иonloadсобытие, давайте посмотримreadAsText, то есть прочитать текст.

readAsText

Тем не менее, давайте сначала изменим html

<input type="file" id="file">
<div id="text"></div>

let reader = null; // 声明reader变量方便后面使用

const fileNode = document.querySelector('#file'); // 获取input标签

fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听，当选择文件以后触发
  if (window.FileReader) { // 判断浏览器中有没有FileReader，毕竟现在不是所有浏览器都有FileReader
    reader = new FileReader(); // 实例化FileReader
    reader.onload = (event) => { // 设置读取成功以后执行的方法
      document.querySelector('#text').innerHTML = event.target.result; // 前面说过，成功返回的数据再result属性中，然后将拿回来的文本添加到指定标签中
    }
  } else { // 没有FileReader的弹出警告然后返回
    alert('你的先浏览器没有FileReader，不能这么干！');
    return;
  }
  const file = e.target.files[0]; // 拿到选择的文件信息
  reader.readAsText(file); // 将文件信息转成文本，默认是UTF-8格式，这个就是转成功后执行 reader.onload 方法
})

Создайте новый текстовый файл, другие текстовые файлы должны быть в порядке

Таким образом, мы реализуем потребности в локальном предварительном просмотре изображений и текста~

расслабиться на некоторое время

Давайте расширим класс, то есть, когда мы получаем картинку, она фактически преобразуется в формат base64, а затем представляется на странице, то у нас теперь есть API, который может генерировать локальный адрес для картинки, а затем отображать ее, тогда это--URL.createObjectURL()

Как это использовать? ? ? Давайте посмотрим на код

На этот раз наш html имеет два тега img, что нам удобно для сравнения

<input type="file" id="file">
<img src="" alt="" id="img">
<img src="" alt="" id="img2">

let reader = null; // 声明reader变量方便后面使用

const fileNode = document.querySelector('#file'); // 获取input标签

fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听，当选择文件以后触发
  if (window.FileReader) { // 判断浏览器中有没有FileReader，毕竟现在不是所有浏览器都有FileReader
    reader = new FileReader(); // 实例化FileReader
    reader.onload = (event) => { // 设置读取成功以后执行的方法
      document.querySelector('#img').src = event.target.result; // 前面说过，成功返回的数据再result属性中，然后将这个设置成img标签的src地址
    }
  } else { // 没有FileReader的弹出警告然后返回
    alert('你的先浏览器没有FileReader，不能这么干！');
    return;
  }
  const file = e.target.files[0]; // 拿到选择的文件信息

  /* 这里是我们用的URL.createObjectURL() */

  document.querySelector('#img2').src = URL.createObjectURL(file) // 我们直接通过URL.createObjectURL()这个方法来把文件信息转成一个url地址

  /* end */
  reader.readAsDataURL(file); // 将文件信息转成DataUrl，这个就是转成功后执行
})

Эпилог

Теперь мы можем реализовать локальное изображение предварительного просмотра, текст и необходимость генерировать URL-адрес для предварительного просмотра.

В будущем я буду продолжать обновлять блог, чтобы записывать небольшие проблемы, с которыми я успешно столкнулся в обучении, или новые навыки, которые я приобрел.

Я первопроходец войны пятерки, ученик начальной школы в мире фронтенда.

Категории