Открыть файл с localhost с помощью javascript

Question

Im пытается добавить загрузчик изображений на свой сайт. У меня есть javascript с jcrop (сценарий не мой, я использовал тот, который я нашел в Интернете); этот скрипт принимает файл изображения с компьютера, который он посещает, и переходит на php. Он начинается с преобразования вывода формы в файл javascrip.

var oFile = $('#image_file')[0].files[0]; 

Это ключевая строка для скрипта, все остальное происходит от oFile. Я хочу, чтобы пользователи могли загружать фотографии, добавляя веб-ссылку (я уже сделал возможным сохранение файлов изображений на локальном хосте, разместив ссылку); Как я могу открыть изображение из моего localhost с помощью javascript и поместить его в том же формате, что и переменная oFile в строке выше, чтобы мой скрипт мог работать с ним?

Answer 1

Вы можете использовать binary Ajax в современных браузерах, чтобы извлечь ресурс в виде файла:

var oReq = new XMLHttpRequest(); 
oReq.open("GET", fileURLGivenByUser, true); 
oReq.responseType = "blob"; 

oReq.onload = function(oEvent) { 
    var oFile = oReq.response; 
    processTheFileSomehow(oFile); 
}; 

oReq.send(); 

Это будет работать до тех пор, как:

• fileURLGivenByUser находится на том же домене, что и страница запуск сценария (например, сценарий обрезки выполняется на foo.com, а ссылка на изображение также находится на foo.com), или

• Ресурс целевого изображения подается с заголовком ответа CORS на Access-Control-Allow-Origin: * (например, ваше кадрирование скрипт работает на foo.com, ссылка изображения на bar.com и bar.com служит файл с приемлемыми заголовками CORS)

Итак, для вашего пользователя использовать ссылку localhost, пользователь должен использовать локальный веб-сервер, и этот веб-сервер должен показывать свои изображения с помощью Access-Control-Allow-Origin: * или Access-Control-Allow-Origin: whateverdomainyouuse.com (т. е. в любом домене, на котором выполняется сценарий кадрирования).

Если ограничения CORS слишком ограничительные (они, скорее всего,), вы можете использовать server-side proxy на своем хосте. Например, при запросе

http://mydomain.com/proxy/http://targetdomain.com/image.png 

сервер делает запрос и ответ с содержанием

http://targetdomain.com/image.png