Javascript.RU

Отправка формы с файлами через AJAX

На основе статьи http://javascript.ru/node/7686

function sendform(form, url, fn){
  if(typeof 'form' != 'object') var form = document.forms[form];
  //var url = window.location;

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

    //var files = elem.files;

    xhr.open("POST", url);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    //Если реализован интерфейс FormData, то лучшего и не пожелаешь
    if(typeof FormData == 'function'){
      var fdata = new FormData(form);
      xhr.send(fdata);
    }
    else {
      var body = '';
      var readers = new Array();
      var filenames = new Array();
      var inputnames = new Array();

      var boundary = "--------------"+(new Date()).getTime() + (Math.floor(Math.random()*(999999-100000)+100000));
      var elements = form.elements;
      for(i = 0; i < elements.length; i++){
        if(elements[i].type != 'file'){
          body += "--" + boundary + "\r\n";
          body += 'Content-Disposition: form-data; name="'+elements[i].name+'"'+'\n';
    	  body += '\r\n';
    	  body += elements[i].value;
    	  body += '\r\n';
          }
          else {
            var files = elements[i].files;
            for(j = 0; j < files.length; j++){
              var reader = new FileReader();
              var file = files[j];
              filenames.push(file.name);
              inputnames.push(elements[i].name);
              reader.onload = function(){
                var done = true;
                for(var i = 0; i < readers.length; i++){
                  if(readers[i].readyState != FileReader.DONE){ done = false; }
                }
                if(done) {
                  //alert('Все файлы загружены');
                  for(var i = 0; i < readers.length; i++){
                    body += "--" + boundary + "\r\n";
                    body += "Content-Disposition: form-data; name='"+inputnames[i]+"'; filename='" + filenames[i] + "'\r\n";
                    body += "Content-Type: application/octet-stream\r\n\r\n";
                    body += readers[i].result + "\r\n";
                  }

                  body += "--" + boundary + "--\r\n";

                  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
                  if(xhr.sendAsBinary) {
                    // только для firefox
                    xhr.sendAsBinary(body);
                  } else {
                    // chrome (так гласит спецификация W3C)
                    xhr.send(body);
                  }
                }
              };
              reader.readAsBinaryString(file);
              readers.push(reader);
            }
          }
      }
    }
}
-1

Автор: torbasow, дата: 8 мая, 2012 - 21:29
#permalink

А что такое text2obj?


Автор: Jason Bourne, дата: 12 мая, 2012 - 06:19
#permalink

Функция для преобразования JSON в объект Javascript.

function text2obj(text){
  var json = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
			text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
			eval('(' + text + ')');

  return json;
}

Автор: korol-ariya (не зарегистрирован), дата: 6 марта, 2013 - 19:43
#permalink

Без примера не понятно почему столько много букв, и оценка -1


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Jason Bourne
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum