Робота з файлами в javascript, частина 1 основи - все про web розробці на
При бурхливому розвитку web, і стандартів html зокрема, робота з файлами, практично ніколи не змінювалася. На щастя, з приходом HTML5 і пов'язаних з ним API, зараз у нас набагато більше можливостей для роботи з файлами, ніж будь-коли в попередніх версіях браузерів (iOS досі немає підтримки File API).
Тип Файл - File
Тип File визначено в специфікації File API [1] і є абстрактним поданням файлу. Кожен екземпляр File має такі властивості:
name - ім'я файлу
size - розмір файлу в байтах
type - MIME тип файлу
Об'єкт типу File дає важливу інформацію про фото, котрі дають прямий доступ до вмісту файлу. Він є лише посиланням на файл, і отримання даних з цього файлу є окремим процесом в цілому.
Отримання посилань на файли
Зрозуміло, доступ до призначених для користувача файлів строго заборонений в Інтернеті, тому як очевидні проблеми з безпекою особистих даних. Ви не хотіли б, щоб ви завантажували веб-сторінку, а потім вона сканувала Ваш жорсткий диск і з'ясовувала, що там є корисного. Потрібен дозвіл від користувача, щоб отримати доступ до файлів з його комп'ютера. Проте для веб-сторінок читання файлів дозволено кожен раз, коли користувач вирішать щось завантажити.
Коли ви використовуєте елемент , Ви даєте веб сторінці (і сервера) дозвіл на доступ до файлу. Так, що перше, як ви можете отримати об'єкт File, це поле .
HTML5 визначає файлові посилання для всіх управління. Ця колекція FileList, яка представляє собою структуру в вигляді масиву під назвою FileList містить об'єкти типу File для кожного обраного файлу в поле (Пам'ятаєте, HTML5 дозволяє вибрати кілька файлів в цьому елементі управління). Так що в будь-який момент часу, Ви можете отримати доступ до файлів користувача, які він вибрав, за допомогою коду на зразок цього:
Drag and drop файлів
Доступ до файлів з форми за коштами контролів і раніше вимагає дій користувачів: знаходження і вибору потрібного файлу. На щастя, HTML5 Drag and Drop надає ще один спосіб для користувачів, щоб надати доступ до своїх файлів: шляхом простого перетягування файлів з робочого столу в веб-браузер. Все, що вам потрібно зробити, щоб це реалізувати відстежувати дві події.
event.dataTransfer.files інший FileList об'єкт, через який ви можете отримати доступ до інформації про файлах. Код майже такий же, як і контроль форми і об'єкти типу File можуть бути доступні таким же чином.
AJAX pагрузка файлів
Саме чудове в об'єкті FormData, що ви можете додати файл безпосередньо до нього, фактично імітуючи завантаження файлу через HTML-форму. Все, що вам потрібно зробити, це додати в файл посилання з певним ім'ям, і браузер зробить все інше. Для прикладу:
Як тільки об'єкт FormData передається в send (), належні до його вмісту HTTP заголовки встановлюються автоматично. Вам не потрібно турбуватися про встановлення правильного кодування форми при використанні файлів, сервер буде працювати з отриманими файлами, так як якщо б була відправлена звичайна HTML форма. Новомосковський дані про надісланому файлі з $ _FILES [ 'photo'] і текстовиt даних з $ _POST [ 'name']. Це дає вам універсальність, щоб написати код обробки на стороні сервера, який може легко працювати як з традиційними HTML-формами так і з формами надісланими через Ajax.
І все це працює на останній версії більшості браузерів, включаючи Internet Explorer 10. На жаль Internet Explorer 9 цього поки не підтримує.
Що далі
Посилання по темі:
Привіт шановні відвідувачі сайту!
Ніяк не можу зберегти бінарні дані на стороні свого сервера. Не можу зрозуміти як їх правильно витягти в PHP скрипт, або, можливо, справа в чомусь іншому про що я не здогадуюся. Пробував бінарні дані упаковувати в контейнер Blob, може спробувати в ArrayBuffer? Методом POST на сервер надсилається об'єкт 'Blob' або 'ArrayBuffer', може треба звернеться до будь-яких його свойтва щоб витягти дані?
Суть схеми в тому щоб за допомогою XHR запиту отримати аудіо файл у форматі MP3 і надалі записати (Спарс) його собі на сервер.
Заздалегіть вдячний! З повагою Олег.