Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.10.2014, 13:05   #1
andrey_besp
Пользователь
 
Регистрация: 12.04.2012
Сообщений: 15
По умолчанию Загрузка картинок на сервер с помощью Ajax синхронно

Есть вот такой метод-загрузчик, который загружает картинки на сервер асинхронно
Код:
/*
 * Объект-загрузчик файла на сервер.
 * Передаваемые параметры:
 * file       - объект File (обязателен)
 * url        - строка, указывает куда загружать (обязателен)
 * fieldName  - имя поля, содержащего файл (как если задать атрибут name тегу input)
 * onprogress - функция обратного вызова, вызывается при обновлении данных
 *              о процессе загрузки, принимает один параметр: состояние загрузки (в процентах)
 * oncopmlete - функция обратного вызова, вызывается при завершении загрузки, принимает два параметра:
 *              uploaded - содержит true, в случае успеха и false, если возникли какие-либо ошибки;
 *              data - в случае успеха в него передается ответ сервера
 *              
 *              если в процессе загрузки возникли ошибки, то в свойство lastError объекта помещается
 *              объект ошибки, содержащий два поля: code и text
 */

var uploaderObject = function(params) {

    if(!params.file || !params.url) {
        return false;
    }

    this.xhr = new XMLHttpRequest();
    this.reader = new FileReader();

    this.progress = 0;
    this.uploaded = false;
    this.successful = false;
    this.lastError = false;
    
    var self = this;    

    self.reader.onload = function() {
        self.xhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
                self.progress = (e.loaded * 100) / e.total;
                if(params.onprogress instanceof Function) {
                    params.onprogress.call(self, Math.round(self.progress));
                }
            }
        }, false);

        self.xhr.upload.addEventListener("load", function(){
            self.progress = 100;
            self.uploaded = true;
        }, false);

        self.xhr.upload.addEventListener("error", function(){            
            self.lastError = {
                code: 1,
                text: 'Error uploading on server'
            };
        }, false);

        self.xhr.onreadystatechange = function () {
            var callbackDefined = params.oncomplete instanceof Function;
            if (this.readyState == 4) {
                if(this.status == 200) {
                    if(!self.uploaded) {
                        if(callbackDefined) {
                            params.oncomplete.call(self, false);
                        }
                    } else {
                        self.successful = true;
                        if(callbackDefined) {
                            params.oncomplete.call(self, true, this.responseText);
                        }
                    }
                } else {
                    self.lastError = {
                        code: this.status,
                        text: 'HTTP response code is not OK ('+this.status+')'
                    };
                    if(callbackDefined) {
                        params.oncomplete.call(self, false);
                    }
                }
            }
        };

        self.xhr.open("POST", params.url, false);
        console.log(self.xhr);
        var boundary = "xxxxxxxxx";
        self.xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
        self.xhr.setRequestHeader("Cache-Control", "no-cache");

        var body = "--" + boundary + "\r\n";
        body += "Content-Disposition: form-data; name='"+(params.fieldName || 'file')+"'; filename='" + params.file.name + "'\r\n";
        body += "Content-Type: application/octet-stream\r\n\r\n";
        body += self.reader.result + "\r\n";
        body += "--" + boundary + "--";

        if(self.xhr.sendAsBinary) {
            // firefox
            self.xhr.sendAsBinary(body);
        } else {
            // chrome (W3C spec.)
            self.xhr.send(body);
        }

    };
    self.reader.readAsBinaryString(params.file);
};
Представление решение взято с habrahabr.ru
Мне необходимо сделать загрузку синхронно. Для этого я в методе open() аргумент async меняю на false, по идеи загрузка должна пойти синхронно. Но по какой то причине возникает ошибка при передачи файла на сервер.
self.xhr.open("POST", params.url, false);
У меня сложилось мнение, что передача файлов на сервер возможно только асинхронно, так как не смог найти примеры синхронной передачи файлов в рунети. Может, кто что подскажет, бьюсь с этой задачей несколько дней.
andrey_besp вне форума Ответить с цитированием
Старый 16.10.2014, 08:56   #2
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Примеров нет потому что смысла в этом никакого. Старые браузеры при отправке синхронного запроса вообще полностью замораживаются - даже скроллить страницу невозможно. Ну и все ваши EventListener естественно не будут работать.
^-.-^ My GitHub

Последний раз редактировалось Fenex; 16.10.2014 в 08:59.
Fenex вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача картинок на сторону пхп (AJAX) SkrudjMakdak JavaScript, Ajax 1 12.02.2011 17:47
Загрузка картинок на radikal.ru Joe_Tribbiani Работа с сетью в Delphi 38 02.10.2010 07:54
Загрузка картинок abaza C++ Builder 3 27.07.2010 16:58
Автоматическая загрузка картинок Kiss Of Angel Microsoft Office Excel 8 06.04.2010 15:56
Вывод с помощью ajax vlad-55 JavaScript, Ajax 14 02.11.2009 18:37