отримати зображення
Щоб завантажити файл на сервер, Вам знадобиться елемент . Але ви також повинні дозволити користувачеві перетягувати зображення з робочого столу прямо на веб-сторінку Вашого сайту.
Множинний вибір файлів для завантаження
Щоб дозволити користувачу вибрати за один раз декілька файлів треба вставити в елемент file атрибут multiple
Попередня обробка файлів
Використовуємо File API
(Деталі роботи з File API дивіться тут)
Після того як ви вибрали файли в елемент file, датапікером або за допомогою dragdrop у Вас є список файлів готових до використання.
Переконайтеся, що ці файлиявляются зображеннями:
Показати мініатюрку / прев'юшки
Є два варіанта. Ви можете використовувати FileReader (з File API), або використовувати новий метод createObjectURL ().
використовуємо Canvas
Ви можете намалювати файл на елементі
Зміна розміру зображення
Люди звикли завантажувати зображення прямо зі своєї камери. Це дає високу роздільну здатність і надзвичайно важкі (кілька мегабайт) файли. Залежно від використання, ви можете змінити розмір таких зображень. Фокус в тому, щоб просто мати невеликий canvas (800 × 600, наприклад) і намалювати це зображення в цей canvas. Звичайно, вам доведеться змінити розміри canvas'а, щоб зберегти відносини сторін зображення.
редагування зображення
Тепер у вас є зображення в canvas. Тепер Ваші можливості безмежні. Припустимо, ви хочете застосувати фільтр сепія:
Завантажити з XMLHttpRequest
Тепер, коли ви завантажили зображення на клієнта, в кінцевому підсумку Ви хочете відправити їх на сервер.
Як відправити canvas
неподільна завантаження
Дозволити користувачеві завантажити тільки один файл або всі файли, в той же час.
Показати хід завантаження
Використовуйте подія завантаження для створення індикатора:
використовуйте FormData
Ви, напевно, навряд чи хочете просто завантажити файл (який може бути легко зроблено за допомогою: xhr.send (файл)), але також додати сторонню інформацію (наприклад, ключ і назва).
В цьому випадку ви повинні створити multipart / form-data запит за допомогою об'єкта FormData
Відкрийте Ваше API сайту
Може бути, ви хочете, щоб інші сайти, використовували Ваш сайт як сервіс. \
Дозвольте cross-добменние запити
За замовчуванням, Ваше API доступно тільки із запиту створеного тільки з вашого власного домену. Якщо ви хочете, дозволити людям використовувати свій API, дозвольте крос-XHR в заголовку HTTP:
Ви також можете дозволити тільки заздалегідь визначений список доменів.