Как загрузить файл на сайт с помощью Javascript?

Question

[Wolfak]

Доброе время суток.
Подскажите пожалуйста, как в моем случае загрузить файл на сервер при помощи Javascript?
У меня есть вот такой код, с помощью которого я пытаюсь отправить файл на сервер.

var file = document.getElementById("LoadMyFile"),
xhr = new XMLHttpRequest(),
form = new FormData();

var upload_file = file.files[0];
form.append("mydate", "Мои данные");
form.append("NewPost", upload_file);
xhr.open("POST", "ссылка на мой документ PHP", true);
xhr.send(form);

if (xhr.status != 200) {
// Вывод ошибки
document.getElementById("HeadCameraPage").innerHTML = xhr.status + ': ' + xhr.statusText;
} else {
if (xhr.responseText > 0) {
// Все ок
} else {
// Вывод результата
 document.getElementById("HeadCameraPage").innerHTML = xhr.responseText;
}
}

В форме (input type="file") с ID LoadMyFile программно задана ссылка на файл с изображением так:

document.getElementById("LoadMyFile").files[0] = "Локальная ссылка на файл с изображением на компьютере";

Вот так принимаю файл на стороне сервера:

move_uploaded_file($_FILES["NewPost"]["tmp_name"],$_FILES["NewPost"]["name"]);

При отправке пишет ошибку со статусом 0.

Подскажите в чем может быть ошибка? Так заморочился с загрузкой файлов, так как пишу приложение под магазин Windows на Javascript (WinJS). Обычно все запросы на сервер работали как в браузере, а вот файл отправлять не хочет.
Надеюсь на помощь. Заранее, огромное спасибо!

Answer 1

[Виталий Ф.]

Программно задавать ссылку на файл нельзя! Так сделано из соображений безопасности.

Только через диалоговое окно.

Comments

[Wolfak]

Подскажите, каким тогда способом можно отправить файл в PHP файл вообще не используя формы? У меня ее нет, есть ссылка на изображение и само изображение. И каким способом можно обработать этот файл на стороне сервера?

[Виталий Ф.]

Отправка файла и отправка ссылки - это разные вещи. Если у вас реально ссылка (типа some.site.ru/images/1.png) - то отправляйте её через простой текстовой инпут.

А на сервере нужно будет просто скачать файл через curl или т.п.

[Wolfak]

Виталий Ф.: так ссылка то локальная и расположена на смартфоне/планшете/компьютере например C:\file.png

[Виталий Ф.]

тогда никак. вообще.

[Wolfak]

Виталий Ф.: печально( это основная функция моего приложения(

[Виталий Ф.]

Скорее всего вы делаете что то не так. Откуда берутся локальные ссылки на файлы?

[Wolfak]

Виталий Ф.: берётся файл. Но можно получить и ссылку на него. Делаю все по вот этой статье, через форму диалог выбора файла не работает. https://msdn.microsoft.com/ru-ru/library/windows/a...

[Виталий Ф.]

примеры то смотрели? https://code.msdn.microsoft.com/windowsapps/File-p...

На stackoverflow искали? stackoverflow.com/questions/24721813/work-with-ima...

[Wolfak]

Виталий Ф.: так это же только выбор файла, а не его отправка на сервер.

[Виталий Ф.]

После выбора файла должен вызваться event (continueFileSavePicker), в котором можно получить само содержимое файла. Отправить содержимое скорее всего нужно то же через API.

[Wolfak]

Виталий Ф.: да, именно так и получаю файл и его содержимое. Но как отправить вот его..

[Виталий Ф.]

Это разве не то? https://msdn.microsoft.com/ru-ru/library/windows/a...

[Wolfak]

Виталий Ф.: интересная статья, не натыкался на нее. Спасибо

[Wolfak]

Виталий Ф.: Теперь не могу понять как написать обработку отправки) И еще не могу понять как передать дополнительную информацию пользователя вместе с файлом.

[Виталий Ф.]

> Теперь не могу понять как написать обработку отправки

На стороне сервера? Тут бы nc помог (на linux) - что бы глянуть что там прилетает.

Ох. Смотрим пример: https://code.msdn.microsoft.com/windowsapps/HttpCl...

И описание к HttpMultipartFormDataContent.Add https://msdn.microsoft.com/en-us/library/windows/a...

[Wolfak]

Виталий Ф.: спасибо, утром посмотрю. Здесь выложил полный код как пытаюсь отправить, но после нажатия на кнопку "отправить" ничего не происходит.
https://social.msdn.microsoft.com/Forums/en-US/186...
Доброй ночи, огромное спасибо что пытаетесь помочь)

[Wolfak]

Виталий Ф.: На стороне сервера? Тут бы nc помог (на linux) - что бы глянуть что там прилетает.
Посмотреть логи на хостинге, вроде ничего даже не пыталось загрузиться.

[Wolfak]

Виталий Ф.: Разобрался с загрузкой, все работает на стороне клиента, но файл не принимается на сервере. Не могу понять как из объекта класса ResponseInformation, который получается в качестве ответа сервера получить текст ответа(статус ответа получается 200). Так как там могут писаться ошибки из PHP документа и прочее. Вот подробнее об этом классе.
https://msdn.microsoft.com/ru-ru/library/windows/a...

[Wolfak]

Не могу понять какой нужен ключ для ResponseInformation.headers( тип IMapView)

[Виталий Ф.]

Wolfak: Судя по докам - нужно у UploadOperation вызвать метод GetResultStreamAt(0)
https://msdn.microsoft.com/en-us/library/windows/a...

[Wolfak]

Виталий Ф.: спасибо большое, утром опробую. Кстати, пытался добавить свое содержимое, uploader.add("MyDate", "datelist", file.name); но пишет ошибку, что add не поддерживается. Ссылку на весь мой код писал выше.

[Виталий Ф.]

Wolfak: uploader.add - так причем тут uploader? Нужно через HttpMultipartFormDataContent

[Wolfak]

Виталий Ф.: так у меня в проекте нет httpMultipartFormDataContent, его нужно создавать? Или откуда он берется?

[Wolfak]

Виталий Ф.: GetResultStreamAt(0) Возвращает тип: IInputStream, который тоже непонятно как расшифровать)

[Виталий Ф.]

Wolfak: Это поток. Как то так (гугл):

IInputStream inputStream = upload.GetResultStreamAt(0);
DataReader reader = new DataReader(inputStream);

var bytesLoaded = await reader.LoadAsync(1000000);

// Вывод в лог
Debug.WriteLine(reader.ReadString(reader.UnconsumedBufferLength));

[Wolfak]

Виталий Ф.: Visual studio не понимает что такое IInputStream, DataReader, await. Но если заменить IInputStream на var нормально понимает строку var inputStream = upload.GetResultStreamAt(0);

[Wolfak]

Есть вот такой вот метод, но с ним в результате тоже получается непонятно что. https://msdn.microsoft.com/ru-ru/library/windows/a...

[Виталий Ф.]

Wolfak: > Visual studio не понимает что такое IInputStream, DataReader

Windows.Storage.Streams.DataReader

https://msdn.microsoft.com/library/windows/apps/br...

[Wolfak]

Виталий Ф.: решил проблему. Нужно было так:
var inputStream = textcomp.getResultStreamAt(0);
var dataReader = new Windows.Storage.Streams.DataReader(inputStream);
var dataReaderLoadOperation = dataReader.loadAsync(1000000);
var lengthString = dataReader.unconsumedBufferLength;
var ResultText = dataReader.readString(lengthString);

document.getElementById("CamMeta").innerHTML = String(ResultText);

Актуальным остался один вопрос, как добавить свой текст в POST запрос)

[Wolfak]

Виталий Ф.: еще одна проблема) не понимаю как принять файл на стороне сервера? вот так отправляется uploader.setRequestHeader("Filename", file.name); но $_FILES["Filename"] и $_FILES["Filename"]["size"] не приходят в PHP файл. Но ответ от данного файла получается правильные.

[Wolfak]

Виталий Ф.: методом тыка выяснил что название файла обрабатывается так:
$headersCont = apache_request_headers();
$headersCont[Filename] - имя файла
Осталось узнать как получить сам файл.

[Wolfak]

Нужно как-то используя функцию move_uploaded_file загрузить файл, но непонятно как.

[Wolfak]

Решение нашел здесь: Как обработать поток данных в PHP?

Answer 2

[coderisimo]

может поможет. вот пример отправки файла на сервер :

var form = document.forms.namedItem("fileinfo");

    form.addEventListener('submit', function (e) {

        e.preventDefault();
        var fd = new FormData(form);
        fd.append("action", "upload_diagram_image");
        jQuery.ajax({
            url: base_url,
            type: "POST",
            data: fd,
            enctype: 'multipart/form-data',
            processData: false, // tell jQuery not to process the data
            contentType: false   // tell jQuery not to set contentType
        }).done(function (data) {
            if (data !== 'error') { //
            
            }
        });
        return false;
    });

Comments

[Wolfak]

У меня нет формы. Инпут сам создал программно.

[Wolfak]

jQuery.ajax тоже не работает в WinJS.

[coderisimo]

в данном случае на сервер отправляется объект где в $_REQUEST['action'] собственно название экшна , а в $_FILES все, что там должно быть в данном случае :)

[coderisimo]

Wolfak: сразу не разобрался, что ты используешь другой инструмент : stackoverflow.com/questions/27903717/windows-store... вот похожая тема

[Wolfak]

coderisimo: Спасибо, но не работает. К тому же там отправка видео файла, а мне нужно универсальное, под фото и видео. Переделал под себя из примера, не было никакой реакции. Возможно намудрил с PHP обработчиком, но судя по логу, ничего даже не отправлялось.

[coderisimo]

Wolfak: ну так в консоли браузера вы что видите? есть запрос к серверу или нет? для начала надо четко понять где проблема на клиенте или на серваке

[Wolfak]

coderisimo: у меня не браузер, а приложение для Windows Phone и Windows в процессе разработке. Запускаю на локальном компьютере или смартфоне.

[coderisimo]

Wolfak: ну есть же средства отладки? что вы используете? Fiddler есть?

[coderisimo]

насколько я понимаю здесь его можно использовать для понимания, что происходит с вашими запросами : https://msdn.microsoft.com/ru-RU/Library/bb250446.aspx

[Wolfak]

coderisimo: не знаю что такое Fiddler) Пользуюсь Visual Studio 2015.

[Wolfak]

coderisimo: Разобрался с загрузкой, все работает на стороне клиента, но файл не принимается на сервере. Не могу понять как из объекта класса ResponseInformation, который получается в качестве ответа сервера получить текст ответа(статус ответа получается 200). Так как там могут писаться ошибки из PHP документа и прочее. Вот подробнее об этом классе.
https://msdn.microsoft.com/ru-ru/library/windows/a...

[Wolfak]

Не могу понять какой нужен ключ для ResponseInformation.headers( тип IMapView)

[coderisimo]

Давненько я не имел дела с .NET :) А проитерировать .headers ? Через foreach , там же словарь , ключ-значение. "Public ReadOnly Property Headers As ReadOnlyDictionary(Of String, String)" Или просто посмотрите в отладчике. Если там будет что-то интересное- сразу увидите

[Wolfak]

coderisimo:
complete(textcomp) {
var inputStream = textcomp.getResultStreamAt(0);
var dataReader = new Windows.Storage.Streams.DataReader(inputStream);
var dataReaderLoadOperation = dataReader.loadAsync(1000000);
var number = dataReaderLoadOperation.getResults();
document.getElementById("CamMeta").innerHTML = String(number);
}

Пишет что метод getResults() не поддерживается. Делаю все по мануалу
https://msdn.microsoft.com/library/windows/apps/br...

[Wolfak]

решил проблему. Нужно было так:
var inputStream = textcomp.getResultStreamAt(0);
var dataReader = new Windows.Storage.Streams.DataReader(inputStream);
var dataReaderLoadOperation = dataReader.loadAsync(1000000);
var lengthString = dataReader.unconsumedBufferLength;
var ResultText = dataReader.readString(lengthString);

document.getElementById("CamMeta").innerHTML = String(ResultText);

[Wolfak]

coderisimo: еще одна проблема) не понимаю как принять файл на стороне сервера? вот так отправляется uploader.setRequestHeader("Filename", file.name); но $_FILES["Filename"] и $_FILES["Filename"]["size"] не приходят в PHP файл. Но ответ от данного файла получается правильные.

[coderisimo]

Wolfak: не совсем ясно что происходит. На сервере напишите в скрипте, который обрабатывает загрузку что-то типа print_r ($_FILES["file"]); и посмотрите, что вернет сервер. Ну и для серьезной работы отладчик надобен.

[Wolfak]

coderisimo: методом тыка выяснил что название файла обрабатывается так:
$headersCont = apache_request_headers();
$headersCont[Filename] - имя файла
Осталось узнать как получить сам файл.

[Wolfak]

Нужно как-то используя функцию move_uploaded_file загрузить файл, но непонятно как.

[coderisimo]

Боюсь, здесь я не помощник )) Я с этим стеком не сталкивался никогда. Здесь все "иначе" ))
желаю победить!

[Wolfak]

coderisimo: спасибо)

[Wolfak]

Решение нашел здесь: Как обработать поток данных в PHP?