В HTML5 - реализовать обычную загрузку файлов перетаскиванием на веб-сайт

JavaScript

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

Когда мы узнали о нативном перетаскивании, предоставляемом HTML, пришло время подумать об этом.что можно использовать для,когда его можно использовать,Используемые сценариитак далее

Анализ сценария

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

实名认证

Давайте еще раз подумаем об этом, в случае с компьютером, когда пользователь открывает окно выбора файла, затем ищет папку, соответствующую картинке, а затем выбирает файл, будет ли это немного хлопотно? Можем ли мы позволить пользователям находить файлы изображений и напрямую импортировать их для загрузки? Ответ положительный.

Как это сделать

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

Расскажите о технологиях, которые нам нужно использовать:

  • Drag & Drop: механизм событий перетаскивания на основе HTML5.
  • File API: веб-приложениям удобно получать доступ к файловым объектам. File API включает FileList, Blob, File, FileReader и схему URI. В этой статье в основном объясняются интерфейсы FileList и FileReader, используемые при загрузке с помощью перетаскивания.
  • FormData: FormData — это новый интерфейс, основанный на XMLHttpRequest Level 2, который может упростить веб-приложения для имитации данных форм Form.Самое главное, что он поддерживает двоичные потоковые данные файлов, поэтому мы можем использовать его для отправки данных файлов на серверную часть. через АЯКС.

Событие перетаскивания HTML5

Что касается события перетаскивания Drag & Drop, я уже писал специальную статью,HTML5 - Перетащите, Если вам интересно, вы можете нажать на ссылку, чтобы просмотреть его. Я не буду здесь слишком многословен. Ниже приведен краткий пример кода загрузки с помощью перетаскивания.

var oDragWrap = document.body;

//拖进
oDragWrap.addEventListener(
  "dragenter",
  function(e) {
    e.preventDefault();
  },
  false
);

//拖离
oDragWrap.addEventListener(
  "dragleave",
  function(e) {
    dragleaveHandler(e);
  },
  false
);

//拖来拖去 , 一定要注意dragover事件一定要清除默认事件
//不然会无法触发后面的drop事件
oDragWrap.addEventListener(
  "dragover",
  function(e) {
    e.preventDefault();
  },
  false
);

//扔
oDragWrap.addEventListener(
  "drop",
  function(e) {
    dropHandler(e);
  },
  false
);

var dropHandler = function(e) {
  //将本地图片拖拽到页面中后要进行的处理都在这
};

Получить данные файла HTML5 File API

Интерфейс FileReader в API файлов, как часть API файлов, FileReader специально используется для чтения файлов. Здесь мы в основном вводим некоторые интерфейсы FileList в File API. Он в основном получает локальный список файлов двумя способами.<input type="file"/>форма, другаяe.dataTransfer.filesИнформация о файле, переданная событием перетаскивания.

var fileList = e.dataTransfer.files;

При использовании метода files данные будут получены в виде массива перетаскиваемых файлов.Каждый файл занимает индекс массива.Если в индексе нет файловых данных, он вернет Null. в состоянии пройтиlengthСвойство получает количество файлов.

var fileNum = fileList.length;

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

  1. Перетаскивайте элементы файлов вместо страниц
  2. Перетаскивайте изображения вместо файлов других типов, которые можноfile.typeсвойство, чтобы получить тип файла
// 检测是否是拖拽文件到页面的操作
if (fileList.length === 0) {
  return;
}

// 检测文件是不是图片
if (fileList[0].type.indexOf("image") === -1) {
  return;
}

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

var dropHandler = function(e) {
  e.preventDefault(); //获取文件列表

  var fileList = e.dataTransfer.files;

  //检测是否是拖拽文件到页面的操作
  if (fileList.length == 0) {
    return;
  }

  //检测文件是不是图片
  if (fileList[0].type.indexOf("image") === -1) {
    return;
  }

  //实例化file reader对象
  var reader = new FileReader();
  var img = document.createElement("img");

  reader.onload = function(e) {
    img.src = this.result;
    oDragWrap.appendChild(img);
  };
  reader.readAsDataURL(fileList[0]);
};

n34B6S.gif

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

Загрузка изображения AJAX

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

Суммировать

  1. перетаскивание монитора: прослушивание событий перетаскивания элементов страницы, в том числе:dragenter,dragover,dragleaveа такжеdrop,быть увереннымdragoverСобытие по умолчанию отменено, иначе оно не может быть запущеноdropмероприятие. Чтобы перетаскивать элементы на страницу, необходимо добавить к ним атрибутыdraggable="true"
  2. Получить перетаскивание файлов: существуетdropПроходит после запуска событияe.dataTransfer.filesПолучить список перетаскиваемых файлов,быть увереннымdropСобытие по умолчанию отменяется, иначе файл будет открыт по умолчаниюlengthсвойство, чтобы получить количество файлов,typeсвойство получить тип файла
  3. Чтение данных изображения и добавление изображения для предварительного просмотра: создать экземплярFileReaderобъект, через которыйreadAsDataURL(file)Метод получает бинарный поток файла и слушает его.onloadсобытие, будетe.resultНазначьте атрибут src для img и, наконец, добавьте изображение в DOM.
  4. отправить данные изображения

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

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

Я много работал над организацией в течение долгого времени, и я надеюсь вручную поставить лайк и поощрить ~

«Отрывок» — это не просто «вставить -> скопировать», а слово в слово, которое вы можете видеть, чувствовать и ощущать.

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

Категории