Очки знаний для загрузки изображений

внешний интерфейс контейнер браузер Ajax

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

настройка стиля

Поскольку он загружается, его необходимо использовать для<input type="file">помечен. Однако по умолчаниюinputСтиль метки не только единый, но и ведет себя по-разному в каждом браузере, поэтому обычно необходимоinputСделайте настройку стиля. но<input>Теги не очень дружелюбны к модификации стиля. Есть много решений, наиболее часто используемым является<input type="file">Вкладки скрыты, затем прошли<label>Ярлыки связываются, а затем изменяются напрямую<label>стиль этикетки. код показывает, как показано ниже:

    <input type="file" id="uploadImg">
    <label for="uploadImg">点击上传</label>

Подтверждение изображения

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

Среди них тип файла может быть установлен<input>помеченacceptуказать тип файла. ноacceptАтрибуты не полностью запрещают пользователям загружать файлы, отличные от указанного типа. Таким образом, вы можете проверить и перехватить каждый атрибут загружаемого файла. Перед проверкой нам нужно пройтиchangeОбъект события для перехода к загруженному файлу:

    event.target.files

Можно получить список загруженных файлов. Объекты в списке содержат следующую информацию:

    {
        lastModified: 1524153515000
        lastModifiedDate: Thu Apr 19 2018 23:58:35 GMT+0800 (中国标准时间) {}
        name: "589adfbfe821c.jpg"
        size: 1357444
        type: "image/jpeg"
        webkitRelativePath: ""
    }

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

Однако изfileВ объекте мы не можем получить информацию о размере изображения. В нашем бизнесе во многих сценариях необходимо ограничить размер загружаемых изображений определенным фиксированным значением или определенным соотношением. Чтобы уменьшить проблему адаптации в более позднем отображении. Чтобы реализовать проверку размера загруженного изображения, нам нужно использоватьFileReaderа такжеImage.

FileReaderОбъекты позволяют веб-приложениям асинхронно читать файлы, хранящиеся на компьютере пользователя.

Image()Функция создаст новый экземпляр HTMLImageElement. Он функционально эквивалентенdocument.createElement('img').

Здесь нам нужно использоватьfileReaderизreadAsDataURL()метод для чтения информации о загруженном файле, черезonloadОбрабатывайте события, чтобы получить информацию о прочитанном файле. следующим образом:

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = e => {
        console.log(e.target.result)
    }

В коде файл — это список файлов, которые мы получили доfilesфайловый объект в формате .e.target.resultдля чтения содержимого файла.

проходить послеnew Image()Функция создает новый экземпляр HTMLImageElement и помещает экземплярsrcназначить какfileReaderПрочтите содержимое файла. Вы можете получить экземпляр файла HTMLImageElement, через который мы можем прочитать информацию о размере изображения. Конкретный код выглядит следующим образом:

    const image = new Image();
    image.src = e.target.result;
    image.onload = () => {
        console.log(image.width, image.height);
    }

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

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

Благодаря предыдущим исследованиям по получению размера изображения. Я считаю, что вы можете быстро придумать более элегантное решение для предварительного просмотра изображений.Теперь, когда мы получили экземпляр файла HTMLImageElement, мы можем напрямую использовать экземплярappendВскоре перейдем к контейнеру страницы Dom. Или напрямую установить полученный файл в существующийimageпомеченsrcв свойствах. Предварительный просмотр загрузки изображений — это так просто.

Загрузка изображения и отображение прогресса загрузки

Чтобы загрузить изображения, мы можем напрямую передатьformтег с формойsubmit()способ загрузки изображений. Однако таким образом мы не можем проверить и перехватить загружаемый файл перед загрузкой. В то же время пользователь должен активно инициировать операцию отправки. Чтобы работа предзагрузочного перехвата, которую мы делали раньше, не прошла даром, нам нужно активно инициировать операцию загрузки файла в нужное время.

Здесь вам нужно использоватьFormDataobject для преобразования входных данных объекта в данные формы.

FormDataОбъект используется для компиляции данных в пары ключ-значение для отправки данных с помощью XMLHttpRequest. Он в основном используется для отправки данных формы, но также может использоваться для отправки данных с ключом (keyed data), который используется независимо от формы. если формаenctypeсвойство установлено наmultipart/form-data, метод формы submit() используется для отправки данных, так что отправленные данные имеют ту же форму.

Сначала мы создаемformDataобъект, а затем передатьappend()способ добавления полей. следующим образом:

    const formData = new FormData();
    formData.append("file", file);

Уведомление,formDataХотя объект, черезconsole.logНо он не может распечатать свое конкретное значение, просто получитеFormData {}.

Затем создайтеXMLHttpRequestОбъект, используемый для отправки ajax-запросов. и черезXMLHttpRequestобъектupload.onprogressметод, информация о загрузке может быть получена в режиме реального времени, а ход загрузки может быть дополнительно получен. Конкретный код выглядит следующим образом:

    const client = new XMLHttpRequest()
    client.open("POST", uploadUrl)
    client.upload.onprogress = function(e) {
      if (e.lengthComputable) {
        let total = e.total;
        let loaded = e.loaded;
        let percentage = parseFloat(loaded / total).toFixed(2);
      }
    }
    client.send(formData)

В приведенном выше кодеuploadUrlURL для загрузки. пройти черезupload.onprogressОбъект события объекта события, вы можете получить размер загруженного файла и полный размер файла текущего прогресса.С помощью этих двух параметров размера вы можете легко рассчитать долю загруженного файла, а затем отображать ли загрузите индикатор выполнения или отобразите данные о ходе выполнения, просто вы можете работать по своему желанию.

перетащить загрузить

В дополнение к традиционной загрузке файла щелчком мыши, загрузка файла с помощью перетаскивания также является очень распространенным сценарием. Чтобы использовать загрузку с помощью перетаскивания, вам нужно использовать метод перетаскивания H5.dropа такжеdragметод. В дополнение к этим двум основным методам существует несколько методов, запускаемых на разных этапах перетаскивания.Обычно используемые методы перетаскивания следующие:

  • событие ondragstart: событие, инициированное, когда перетаскиваемый элемент начинает перетаскиваться (объект является перетаскиваемым элементом)
  • ondrag: это событие запускается непрерывно во время перетаскивания элемента сtouchmoveсобытия похожи. (Объект действия — это перетаскиваемый элемент)
  • событие ondragend: событие, инициированное при завершении перетаскивания (объект является перетаскиваемым элементом)
  • событие ondragenter: событие, инициированное, когда перетаскиваемый элемент входит в целевой элемент (целевой элемент является целевым элементом)
  • событие ondragover: событие, срабатывающее, когда перетаскиваемый элемент перемещается по целевому элементу (целевой элемент является целевым элементом)
  • событие ondragleave: событие, срабатывающее, когда перетаскиваемый элемент перемещается по целевому элементу (целевой элемент является целевым элементом)
  • событие ondrop: событие, инициированное, когда перетаскиваемый элемент находится на целевом элементе и отпускается мышь (целевой элемент является целевым элементом)

События перетаскивания аналогичныtouchразличные этапы мероприятия. Однако следует отметить, что каждое событие перетаскивания имеет свой объект действия, а объект действия делится на «перетаскиваемый элемент» и «целевой элемент». Перетаскиваемый элемент — это перетаскиваемый элемент Dom, который в основном используется в сцене, где Dom перетаскивается и перемещается по странице. Целевой элемент — это область элемента, которая получает перетаскиваемый элемент. Когда перетаскиваемый элемент входит в область, будет запущена серия событий целевого объекта.

В бизнес-сценарии перетаскивания и загрузки изображения перетаскиваемый элемент представляет собой файл изображения за пределами страницы, поэтому здесь используются только события целевого элемента. Мы можем использовать эти события для изменения стиля целевой области и так далее. Два основных события — этоondragoverа такжеondropмероприятие. Может быть, вы думаете, что мне просто нужно получить перетаскиваемый файл, когда я отпускаю мышь, поэтому просто используйтеondropсобытие на линии? Однако из-за поведения браузеров по умолчаниюondropСобытия не запускаются. Следовательно, необходимо использоватьe.preventDefault();остановитьсяondropoverсобытие браузера по умолчанию, тем самым гарантируяondropтриггер события. пройти черезondropОбъект события для мероприятия, мы можем добраться доevent.target.filesТот же список файлов, метод полученияevent.dataTransfer.files; Однако после того, как вы напишете это и перетащите, вы обнаружите, что браузер автоматически переходит на страницу предварительного просмотра изображения. Это также связано с поведением браузеров по умолчанию, поэтому также необходимо использоватьe.preventDefault();чтобы предотвратить поведение браузера по умолчанию. Таким образом, можно выполнять последующие операции проверки файлов. Конкретный код реализации выглядит следующим образом:

    <label for="uploadImg"
        onDragOver={e => {
            e.preventDefault();
        }}
        onDrop={e => {
            if (e.dataTransfer) {
                e.preventDefault();
                const file = e.dataTransfer.files[0];
                ...
            } 
        }}
    </label>

На данный момент общеизвестные моменты загрузки изображений разобраны, и вы можете их добавить.

Категории