1. Файл API: (API файла)
Каждый файл, выбранный элементом управления формой типа файла, является объектом файла, а объект FileList - это список сбора этих объектов файла, представляющий все выбранные файлы. Объект файла наследует от объекта Blob, который представляет двоичные необработанные данные и предоставляет метод среза для доступа к исходным блокам данных внутри байтов. Короче говоря, объект файла содержит объект Flielist, а объект файла наследует от объекта Blob!
Соответствующие отношения атрибута каждого объекта:
Интерфейс FileReader:
Как видно из рисунка, HTML5 также предоставляет интерфейс FileReader: используется для чтения файлов в память и чтения данных в файле.
var Reader = new FileReader ();
Всего есть четыре метода и шесть событий для этого интерфейса:
• readasbinarystring (файл): читать файл как двоичный
• readasDataurl (файл): чтение файла DataIrl
• readaStext (файл, [кодирование]): прочитать файл как текст
• О (нет): чтение файлов прерывания
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
• Onabort: запускается при чтении перерывов файлов
• OnError: запускается, когда возникает ошибка, когда файл считывается
• OnloadStart: запускается при чтении файла.
• OnProgress: продолжает запускать при чтении файла
• Onload: запускается при успешном чтении файла
• OnloadEnd: запускается в конце чтения файла (и запускаются как успех, так и сбой)
Приведенные выше параметры события e имеют e.target.result или это.
2. Перетащите API:
Атрибут перетаскивания: установите атрибут Dragable элемента, который нужно перетаскивать и отбросить в True (Dragable = ”true»)! Элемент IMG и элемент могут быть перетаскиваются и сброшен по умолчанию.
События перетаскивания: (сегментированы на события перетаскивания элементов и события целевых элементов)
События элемента перетаскивания:
• Dragstart: запускается перед перетаскиванием
• Перетащите, непрерывно вытаскивают до и после перетаскивания
• Dragend, Trag Cond Triggers
Событие целевого элемента:
• Dragenter, введите целевой элемент, чтобы запустить
• Драгувер, между входом в цель и выходом из цели, непрерывно вызывая
• Draglave, запуская целевой элемент
• Отбросьте, отпустите триггер мыши на целевом элементе
но! Следует отметить, что в целевом элементе поведение по умолчанию должно быть заблокировано (драгвер и падение отказываются) в событиях Dragover и Drop, в противном случае невозможно реализовать перетаскивание и падение!
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
Объект DataTransfer: он специально используется для хранения данных, которые должны быть переносили во время перетаскивания. Он может быть установлен как свойство Datatransfer событий перетаскивания.
3 атрибуты:
• EffectAllowed: установить стили курсора (нет, копия, копилинк, copymove, ссылка, Linkmove, Move, All и Uninitialized)
• EffectAllowed: установите визуальные эффекты операций перетаскивания
• Типы: тип хранимых данных, псевдо-арайр строк
• Файлы: Получите внешний перетаскиваемый файл, верните список FileList, в разделе «Тип» под файлом списка, который возвращает тип файла
4 Методы:
• setData (): установите ключ и значение данных (должна быть строка)
• getData (): получить данные и получить соответствующее значение в соответствии со значением ключа.
• clearData (): очистить данные, хранящиеся в объекте DataTransfer
• SetDragimage (ImageUrl, Log X, Long Y): используйте элемент IMG, чтобы установить значок перетаскивания
//Пример:
target.addeventlistener ('dragstart', function (e) {
var fs = e.datatransfer.files; // Получить перетаскивание объекта файла списка Flielist объект
var dt = e.datatransfer; // Свойство Datatransfer в качестве события перетаскивания
dt.effectallowed = 'copy';
dt.setdata ('text/plain', 'hello');
dt.setdragimage (Dragicom, -10, -10);
});
3. Перетащите и выпадайте предварительный просмотр изображения:
Идеи:
1. Знакомый с четырьмя событиями целевого элемента перетаскивания файла. Примечание. Поведение по умолчанию блокируется в событиях Ondragover и Ondrop.
2. После перевозки и сброса получите сбор объектов файла: e.datatransfer.files
3. Целью каждого объекта файла в коллекции, судите тип файла и размер файла и выполните соответствующие операции, если указан тип.
4. Читать объект информации о файле: new FileReader (), который имеет такие методы, как чтение объекта файла в качестве DataRl: readasDataurl (файловый объект), события, запускаемые после успешного чтения: событие Onload и т. Д., Это. Result - данные чтения данных
5. Выполните соответствующую логическую обработку в нескольких событиях в объекте FileReader
HTML:
<div> <p> Пожалуйста, перетащите файл изображения в эту область! </p> </div>
Общее количество нагрузки: <span id = 'total'> 100 </span>
JQ:
<script type = "text /javascript"> $ (function () { / *Мысли: *1. Это указанный тип*4. ODIV = $ (". Контейнер"). GET (0); op.html ('Пожалуйста, перетащите файл изображения в эту область!'); Collection // Печать консоли.log (fs.length); Console.log (fs [i] .size); $ ("#total"). Html (e.total); oimg.attr ("src", this.result); Загрузка, Ajax отправляет файл, загрузить двоичный файл}}}} else {alert ('Пожалуйста, загрузите файл изображения!');}}}}}); </script>Изображение воспроизведения:
Резюме: объединение знаний о API события перетаскивания, объекта DataTransfer и объекта для чтения файлов и т. Д., Чтобы достичь предварительного эффекта простой загрузки и выпадений изображений. Вы должны знать отношения и использование объекта и прояснить идеи реализации!
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.