Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Загрузка файла на сервер используя XMLHttpRequest / 13 сообщений из 13, страница 1 из 1
19.03.2013, 17:47
    #38190290
Andrey1306
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
Добрый день.
Используя MVC 4 залить файл на сервер используя XMLHttpRequest и File API как в этом примере.
Не могу понять как получить файл на сервере, как в контроллере его отловить и сохранить , не вижу в Request кроме заголовка ничего, то есть имя , тип размер файла (помещаемое в заголовок) вижу. А как массив байт получить не соображу.

Что использовать как параметр контролера ?
Или как из Request получить файл ?
Клиент
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
  function uploadFile(file, url) {

        var reader = new FileReader();

        reader.onload = function () {
            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener("progress", function (e) {
                if (e.lengthComputable) {
                    var progress = (e.loaded * 100) / e.total;
                    /* ... обновляем инфу о процессе загрузки ... */
                }
            }, false);

            /* ... можно обрабатывать еще события load и error объекта xhr.upload ... */

            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        /* ... все ок! смотрим в this.responseText ... */
                    } else {
                        /* ... ошибка! ... */
                    }
                }
            };

            xhr.open("POST", url);
            var boundary = "xxxxxxxxx";
            // Устанавливаем заголовки
            xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary=" + boundary);
            xhr.setRequestHeader("Cache-Control", "no-cache");
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-File-Type", file.type);
            // Формируем тело запроса
            var body = reader.result;
            //var body = "--" + boundary + "\r\n";
            //body += "Content-Disposition: form-data; name='myFile'; filename='" + file.name + "'\r\n";
            //body += "Content-Type: application/octet-stream\r\n\r\n";
            //body += reader.result + "\r\n";
            //body += "--" + boundary + "--";

            if (xhr.sendAsBinary) {
                // только для firefox
                xhr.sendAsBinary(body);
            } else {
                // chrome (так гласит спецификация W3C)
                xhr.send(body);
            }
        };
        // Читаем файл
        reader.readAsBinaryString(file);
    }



Сервер
Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
  [HttpPost]
        [AllowAnonymous]
        public JsonResult UploadImage()
        {
            //var length = Request.ContentLength;
            //var bytes = new byte[length];
            //Request.InputStream.Read(bytes, 0, length);


            var fileName = Request.Headers["X-File-Name"];
            var fileSize = Request.Headers["X-File-Size"];
            var fileType = Request.Headers["X-File-Type"];

            var saveToFileLoc = @"D:\!\upload\11.jpg";//string.Format("{0}\\{1}",
                                           //Server.MapPath("/Files"),
                                           //fileName);




Поделитесь пожалуйста советом или ссылкой на пример , как правильно реализовать асинхронную заливку файлов.
Спасибо
...
Рейтинг: 0 / 0
19.03.2013, 17:57
    #38190309
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
Код: c#
1.
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary=" + boundary);

Окстись, ты же байтовый массив шлешь, а не форму. application/octet-stream нужно. А на сервере Request.InputStream или вообще Request.SaveAs("C:\pron.jpg",false);
...
Рейтинг: 0 / 0
19.03.2013, 17:59
    #38190310
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
Antonariy
Код: c#
1.
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary=" + boundary);

Окстись, ты же байтовый массив шлешь, а не форму. application/octet-stream нужно. А на сервере Request.InputStream или вообще Request.SaveAs("C:\pron.jpg",false);
А что сабж "Загрузка файла на сервер используя XMLHttpRequest" возможен?
...
Рейтинг: 0 / 0
19.03.2013, 18:01
    #38190314
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
Cache-Control — это вообще не нужно, это для клиента заголовок, а не сервера.
...
Рейтинг: 0 / 0
19.03.2013, 18:06
    #38190324
Andrey1306
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
ShSergeAntonariy
Код: c#
1.
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary=" + boundary);

Окстись, ты же байтовый массив шлешь, а не форму. application/octet-stream нужно. А на сервере Request.InputStream или вообще Request.SaveAs("C:\pron.jpg",false);
А что сабж "Загрузка файла на сервер используя XMLHttpRequest" возможен?

Честно не знаю, показалось что возможно , не прав ?
...
Рейтинг: 0 / 0
19.03.2013, 18:07
    #38190328
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
ShSergeAntonariy
Код: c#
1.
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary=" + boundary);

Окстись, ты же байтовый массив шлешь, а не форму. application/octet-stream нужно. А на сервере Request.InputStream или вообще Request.SaveAs("C:\pron.jpg",false);
А что сабж "Загрузка файла на сервер используя XMLHttpRequest" возможен?Почему нет? XMLHttpRequest.send вполне понимает байтовые массивы, другое дело, раньше нельзя было сделать массив из файла. Поэтому только текстовую инфу и постили. А сейчас FileReader типа есть. И всякие копипасты картинок в хроме.
...
Рейтинг: 0 / 0
19.03.2013, 18:11
    #38190341
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
AntonariyShSergeпропущено...

А что сабж "Загрузка файла на сервер используя XMLHttpRequest" возможен?Почему нет? XMLHttpRequest.send вполне понимает байтовые массивы, другое дело, раньше нельзя было сделать массив из файла. Поэтому только текстовую инфу и постили. А сейчас FileReader типа есть. И всякие копипасты картинок в хроме.
Копипасты картинок - ну да, можно. Потом получается код в base64. Файлы тоже можно получить в файрфоксе. Уже несколько лет тому назад обсуждали.
Но, во всех ли браузерах?
...
Рейтинг: 0 / 0
19.03.2013, 18:11
    #38190342
Andrey1306
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
Antonariy,

Вот и я начитался, что можно ...


Нужно проводить кое какие манипуляции с изображениями (сортировка, расположение) вот и не хочется тянуть их на сервер сразу, поэтому для хрома и нужно сделать, манипуляции с картинками на клиенте, и готовые картинки со служебной инфой запостить на сервер.
С клиентской частью все ясно, превью картинки и обьект FileReader() находится в диве, теперь нужно пройтись во всем дивам и отправить изображения
...
Рейтинг: 0 / 0
19.03.2013, 18:15
    #38190349
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
Andrey1306,

Заведите себе <div contenteditable="true">qqqqqqqqq</div>
В него и копипастите картинку. В исходнике она будет выглядеть, как картинка в base64. Передайте содержимое на сервер и сохраните.
...
Рейтинг: 0 / 0
19.03.2013, 18:15
    #38190352
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
ShSergeНо, во всех ли браузерах?Нет конечно.
...
Рейтинг: 0 / 0
19.03.2013, 18:21
    #38190359
Andrey1306
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
ShSerge,

Не во к сожалению всех ((((


Antonariy,

Оставил вот это , файл не сохраяется ни через
Request.SaveAs(saveToFileLoc,false);
Request.InputStream.Read(bytes, 0, length);

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
....
      xhr.open("POST", url);
            // Устанавливаем заголовки
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            //xhr.setRequestHeader("X-File-Name", file.name);
            //xhr.setRequestHeader("X-File-Size", file.size);
            //xhr.setRequestHeader("X-File-Type", file.type);
            // Формируем тело запроса
            var body = reader.result;
            if (xhr.sendAsBinary) {
                // только для firefox
                xhr.sendAsBinary(body);
            } else {
                // chrome (так гласит спецификация W3C)
                xhr.send(body);



Получаю вот такой заголовок и там Request Payload я так понимаю это и есть мой файл ....
картинка

...
Рейтинг: 0 / 0
19.03.2013, 18:22
    #38190362
Andrey1306
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
ShSergeAndrey1306,

Заведите себе <div contenteditable="true">qqqqqqqqq</div>
В него и копипастите картинку. В исходнике она будет выглядеть, как картинка в base64. Передайте содержимое на сервер и сохраните.

Так вот загвоздка у меня с передачей (
...
Рейтинг: 0 / 0
19.03.2013, 19:39
    #38190455
Andrey1306
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Загрузка файла на сервер используя XMLHttpRequest
А всего то надо было использовать FormData();

код
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
  xhr.open("POST", url, true);
            // Устанавливаем заголовки
            xhr.setRequestHeader("Content-Type", "multipart/form-data");
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xhr.setRequestHeader("X-File-Name", file.name);//application/octet-stream
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-File-Type", file.type);

            var formData = new FormData();
            formData.append(file.name, file);
            //xhr.send(formData);

            // Формируем тело запроса
            var body = reader.result;
            if (xhr.sendAsBinary) {
                // только для firefox
                xhr.sendAsBinary(formData);
            } else {
                // chrome (так гласит спецификация W3C)
                xhr.send(formData);
            }




Теперь надо проверить насколько все это асинхронно, и работу в других браузерах
...
Рейтинг: 0 / 0
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Загрузка файла на сервер используя XMLHttpRequest / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]