Как отправить файл на javascript?

var photo = 'http://cs323230.vk.me/u172317140/d_5828c26f.jpg';
var upload_url = 'http://cs9458.vk.com/upload.php?act=do_add&mid=62..';

var xmlhttp = getXmlHttp();
var params = 'photo=' + encodeURIComponent(photo);
xmlhttp.open("POST", upload_url, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4) {
 if(xmlhttp.status == 200) {
 var answer2 = xmlhttp.responseText;
 console.log(answer2);
 alert(answer2);
 }
 }
};
xmlhttp.send(params);

Мне нужно изменить URL-адрес photo на содержимое файла

./DirectoryImage/imagetest.jpg

и отправить содержимое файла

./DirectoryImage/imagetest.jpg

on upload_url.

Но я не знаю, как отправить содержимое файла на upload_url в javascript...

Является ли это возможным?

Кто-нибудь знает, как это сделать?

1 ответ

Да, вы можете, но это нелегко. Фокус в использовании объекта FileReader. Вот пример кода, который я собрал для загрузки изображения после его сброса в

.

Я уверен, что вы можете сделать то же самое с любым файлом, если вы можете сделать объект FileReader из того, что вводит ваш пользователь.

YourNamespace.uploadImg = function(evt) {
 // Get the first file, if a stack of files has been dropped
 // (to transfer the whole stack just repeat the process)
 var file = evt.dataTransfer.files[0]; 

 // Make a FileReader object
 var reader = new FileReader();

 // Build an AJAX request to send the file once the browser has received it.
 // The FileReader will call this onload event when it finished.
 reader.onload = function(evtLoad) {
 var req = new XMLHttpRequest();
 req.open('POST', '/foo/bar.php', true);
 req.onreadystatechange = function() {
 if (req.readyState == 4 && req.status == 200) {
 alert("success");
 }
 };

 // Encode the file stream properly, set the appropriate header, and send.
 var params = "foo=bar&data=" + encodeURIComponent(evtLoad.target.result);

 req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 req.send(params);
 };

 // This starts the whole process: read in the file as a data URL.
 // When it finished it calls the onload() that was defined above.
 reader.readAsDataURL(file);
};

Страницы MDN очень полезны для всей этой темы, таких как API объектов FileReader.

Также, похоже, я помню, что поддержка браузеров для обычных подозреваемых является неудовлетворительной (IE6-7 и т.д.).

Стоит отметить, что это сложно, потому что Javascript в браузерах не был предназначен для общения с сервером в целях безопасности. Javascript обычно является только клиентской стороной. Переносы файлов и т.д. Обычно должны обрабатываться с помощью серверного скрипта в PHP, Perl, Ruby и т.д.

licensed under cc by-sa 3.0 with attribution.