Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Завантаження файлів за допомогою AJAX

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

Здається, я не можу дійти до кінця цікавих можливостей, які ви можете застосувати з з'являються веб-технологіями. Сьогодні я покажу вам, як зробити щось, що до останнього часу було майже безпрецедентним: завантаження файлів через AJAX.

О, звичайно, були хакі; але якщо ви схожі на мене і відчуваєте себе брудними кожен раз, коли ви вводите iframe, вам це дуже сподобається. Приєднуйтесь до мене!

Шукаєте швидке рішення?

Якщо ви шукаєте швидке рішення, на Envato Market є велика колекція скриптів і додатків для завантаження файлів.

Цей HTML5 завантажувач файлів особливо примітний - ви можете легко додавати файли, перетягуючи їх або клікаючи. Всі файли будуть завантажені через AJAX або можуть бути додані в форму, і файли можуть бути перейменовані перед завантаженням. Відмінне, швидке рішення, якщо це те, що ви шукаєте!


Чому у нас немає поганих новин?

Це не працює у всіх браузерах. Однак з деякими прогресивним поліпшенням (або хоч би яким не було поточним модним словом) у нас буде сторінка завантаження, яка буде працювати навіть в IE6 (хоча і без рис AJAX).

Наша AJAX-завантаження буде працювати до тих пір, поки доступний FormData; в іншому випадку користувач отримає звичайну завантаження.

У нашому проекті є три основних компоненти.

  • Атрибут multiple елемента input файлу.
  • Об'єкт FileReader з нового API файлів.
  • Об'єкт FormData з XMLHttpRequest2.

Ми використовуємо атрибут multiple, щоб дозволити користувачеві вибирати кілька файлів для завантаження (багаторазова завантаження файлів буде працювати нормально, навіть якщо FormData недоступний). Як ви побачите, FileReader дозволяє нам показувати мініатюри файлів, що завантажуються (ми чекатимемо зображення).

Жодна з наших трьох функцій не працює в IE9, тому всі користувачі IE отримають нормальне завантаження (хоча я розумію, що підтримка `FileReader` доступна в IE10 Dev Preview 2). FileReader не працює в останній версії Safari (5.1), тому вони не отримають мініатюри, але вони отримають завантаження AJAX і підтвердження. Нарешті, Opera 10.50 підтримує FileReader, але не підтримує FormData, тому він отримає мініатюри, але звичайне завантаження.

Щоб продовжити шлях, давайте приступимо до кодування!


Крок 1: Розмітка і стилізація

Почнемо з деякої базової розмітки і стилізації. Звичайно, це не основна частина цього уроку, я не буду ставитися до вас як до новачка.

HTML

Досить просто, чи не так? У нас є форма, в яка відправляється post'ом на upload.php, який ми розглянемо через секунду, і один елемент введення, типу file. Зверніть увагу, що він має boolean-атрибут multiple, який дозволяє користувачеві одночасно вибирати декілька файлів.

Це дійсно все, що потрібно було тут побачити. Давайте рухатися далі.

CSS

Тут немає абсолютно ніяких особливостей.


Крок 2: PHP

Ми також повинні мати можливість обробляти завантаження файлів на стороні сервера, тому давайте розглянемо це далі.

upload.php

Майте на увазі, що це були перші рядки на PHP, які я написав з легкістю перший рік (я хлопець з Ruby). Ймовірно, вам варто трохи подбати про безпеку; проте ми просто стежимо за тим, щоб не було помилок при завантаженні. Ми використовуємо вбудовану функцію move_uploaded_file, щоб перемістити файл в папку uploads. Не забудьте переконатися, що папка доступна для запису.

Отже, прямо зараз у нас повинна бути робоча форма завантаження. Ви вибираєте зображення (кілька, якщо хочете, і ваш браузер це дозволяє), натисніть кнопку "Upload Files!", І ви отримаєте повідомлення "Successfully Uploaded Images."

Ось як виглядає наш міні-проект:

The styled form

Але, зараз 2011 рік: ми хочемо більшого. Ви помітите, що ми зв'язали jQuery і файл upload.js. Давайте розглянемо це детальніше.


Крок 3: JavaScript

Давайте не будемо втрачати час: тут почнемо!

Ось з чого ми починаємо. Ми створюємо дві змінні: input - це наш елемент введення файлу; formdata буде використовуватися для відправки зображень на сервер, якщо браузер підтримує це. Ми инициализируем його значенням false, а потім перевіряємо, чи підтримує браузер FormData; Якщо це так, ми створюємо новий об'єкт FormData. Крім того, якщо ми можемо відправити зображення за допомогою AJAX, нам не потрібна кнопка "Upload Images!", Тому ми можемо приховати її. Чому нам це не потрібно? Ну, ми збираємося автоматично завантажувати зображення відразу після того, як користувач їх вибирає.

Інша частина JavaScript увійде в вашу анонімну функцію. Потім ми створимо невелику допоміжну функцію, яка буде відображати зображення в браузері:

Функція приймає один параметр: джерело зображення (ми побачимо, як його отримувати). Потім ми просто знаходимо список в нашій розмітці і створюємо елемент списку і зображення. Ми встановили джерело зображення в яку ми здобули джерело, помістили зображення в елемент списку і помістили елемент списку в список. Вуаля!

Потім ми повинні фактично відображати зображення, відображати їх і завантажувати. Як ми вже говорили, ми це зробимо, коли подія onchange буде запущено на вхідному елементі.

Нам не потрібно турбуватися про проприетарной моделі подій IE, тому що IE9+ підтримує стандартну функцію addEventListener.

Там є більше можливостей, але давайте почнемо з цього. По-перше, нам не потрібно турбуватися про проприетарну модель подій IE, тому що IE9+ підтримує стандартну функцію addEventListener (а IE9 і нижче не підтримують нові функції).

Отже, що ми хочемо робити, коли користувач вибрав файли? По-перше, ми створюємо кілька змінних. Єдиний важливий момент зараз - це len = this.files.length. Файли, які користувач вибрав, будуть доступні з об'єкта this.files. Прямо зараз, нас турбує тільки властивість length, тому ми можемо перебирати файли ...

... це саме те, що ми робимо далі. Всередині нашого циклу ми встановлюємо поточний файл в file для зручності доступу. Наступне, що ми робимо, це підтвердження того, що файл є зображенням. Ми можемо зробити це, порівнюючи властивість type з регулярним виразом. Ми шукаємо тип, що починається з "image", за яким слід що-небудь. (Подвійний знак оклику попереду просто перетворює результат в логічний тип.)

Отже, що нам робити, якщо у нас є зображення на руках?

Ми перевіряємо, чи підтримує браузер створення об'єктів FileReader. Якщо це станеться, ми його створимо.

Ось як ми використовуємо об'єкт FileReader: ми збираємося передати наш об'єкт file методу reader.readAsDataURL. Це створює URL-адресу для завантаженого зображення. Однак це не працює так, як ви очікували. URL-адресу даних не повертається з функції. Замість цього URL-адресу даних буде частиною об'єкта події.

Маючи це на увазі, нам потрібно зареєструвати функцію на подію reader.onloadend. Ця функція приймає об'єкт події, за допомогою якого ми отримуємо URL-адресу даних: він знаходиться на e.target.result (так, e.target є об'єктом reader, але у мене були проблеми при використанні reader замість e.target всередині цієї функції), ми просто передамо цей URL-адресу нашої функції showUploadedItem (яку ми написали вище).

Потім ми перевіряємо об'єкт formdata. Пам'ятайте, що якщо браузер підтримує FormData, formdata буде об'єктом FormData; в іншому випадку воно буде false. Отже, якщо у нас є об'єкт FormData, ми будемо викликати метод append. Мета об'єкта FormData - зберігати значення, які ви відправляєте через форму; тому метод append просто бере ключ і значення. У нашому випадку наш ключ - images []; додавши квадратні дужки до кінця, ми перевіряємо кожен раз, що append додає інше значення, ми фактично додаємо його до цього масиву, а не переписуємо властивість image.

Ми майже закінчили. У нашому циклі for ми відобразили кожне зображення для користувача і додали його в об'єкт formdata. Тепер нам просто потрібно завантажити зображення. Зовні циклу for, ось останній фрагмент нашого пазла:

Знову ж таки, ми повинні переконатися, що у нас є підтримка FormData; якщо ми цього не зробимо, кнопка "Upload Files!" буде видно, і користувач завантажить фотографії. Однак, якщо у нас є підтримка FormData, ми подбаємо про завантаження через AJAX. Ми використовуємо jQuery для обробки всіх особливостей AJAX у всіх браузерах.

Ймовірно, ви знайомі з методом $ ajax jQuery: ви передаєте йому об'єкт options. Властивості url, type та success обов'язкові. Властивістю data є наш об'єкт formdata. Зверніть увагу на властивості processData та contentType. Згідно з документацією jQuery, processData за замовчуванням є true і буде обробляти і перетворювати дані в рядок запиту. Ми не хочемо цього робити, тому ми встановлюємо значення false. Ми також встановлюємо contentType в false, щоб переконатися, що дані потрапляють на сервер, як ми і чекаємо.

От і все. Тепер, коли користувач завантажує сторінку, вони бачать це:

Tutorial Image

І після того, як вони виберуть зображення, вони побачать це:

Tutorial Image

Так само були завантажені зображення:

Tutorial Image

Висновок

Завантаження файлів через AJAX це досить круто та здорово, що ці нові технології підтримують це без необхідності багатослівних хаков. Якщо у вас є які-небудь питання про те, що ми тут зробили, напишіть це в коментарях! Велике вам спасибі за читання!

І якщо вам як і раніше потрібна допомога в цій або будь-який інший проблеми з кодінгом, ви можете знайти рішення в Envato Studio.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.