2014-01-03 1 views
12

В форме html у нас есть поле для изображения, чтобы загрузить файл. Я следил за учебником от http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api, и он отлично работает при загрузке файла изображения с локального диска.Как загрузить файл изображения с url с помощью API FileReader?

Но предположим, у меня есть изображение url say http://www.google.com/images/logos/ps_logo2.png и вы хотите загрузить это изображение с удаленного URL вместо загрузки с локального диска.

FileReader API хорошо работает при попытке загрузить изображение с локального диска, но как мы можем использовать его для загрузки изображений по URL-адресам?

Его легко создать изображение base64 и использовать его для предварительного просмотра, установив в поле изображения как <img src='data:image/png;base64,iAks4ds__base64__string' id='user_img'>, но какой рабочий процесс следует принять для загрузки изображений с удаленного URL с помощью jQuery или JavaScript?

Как я могу? Какие-либо предложения?

+1

Почему вы просто не получите его на сервере с завитком или что-то. – Musa

+0

Возможный дубликат: http://stackoverflow.com/questions/5420384/convert-an-image-into-binary-data-in-javascript – fiddler

+0

Я согласен с использованием curl. Мой подход заключается в использовании перетаскивания (например: http://stackoverflow.com/a/11973398/1798697), получения URL-адреса и отправки URL-адреса на сервер (вместо фактических данных файла). Когда сервер получает URL-адрес, он использует curl (или w/e x-server thing), чтобы получить свою собственную копию. – plong0

ответ

2

FileReader API предназначен для локальных файлов (КФ http://www.html5rocks.com/en/tutorials/file/dndfiles/)

Если вы хотите, чтобы загрузить изображение с удаленного URL и извлечь свои данные в JavaScript можно использовать Image и Canvas элементы, как описано в следующий вопрос: Convert an image into binary data in javascript

+3

Это уже не сработает. 'SecurityError: Не удалось выполнить 'toDataURL' в 'HTMLCanvasElement': зараженные холсты могут не экспортироваться.' – Musa

+0

Я не знаю об этом ограничении безопасности. Thx для обмена. – fiddler

0

как говорит @fiddler ответ, FileReader для локальных файлов только , если вам нужно, чтобы получить такие вещи, как изображения с удаленных адресов, то вы можете следовать другому подходу

1) using Http Get request
2) using Canvas features

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

1) Cors (происхождения Креста Обмен ресурсами) ?
2) JSONP ?

теперь вы хотите знать, так cors or jsonp

, если у вас есть доступ к серверу, где ваши удаленные вещи есть вы можете сделать сервер сторона cors ?, который рекомендуется большинством.

но вопрос в поисках решения, которое может обрабатывать любые удаленные ресурсы, CORS прокси ? поможет вам
free cors proxies

 Смежные вопросы

  • Нет связанных вопросов^_^