Как отправить содержимое формы для формы multipart/form-ajax (без jquery)?

Я пытаюсь отправить некоторую форму без перезагрузки страницы, и я пытаюсь понять детали под капотом, поэтому не использую какую-либо библиотеку JavaScript:

var http = createRequestObject();
function createRequestObject() {
    var objAjax;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        objAjax=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        objAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return objAjax;
}

function display_progress() { ... }    

function upload_file() {
    var request = 'UploaderServlet';
    http.open('post', request);
    http.onreadystatechange = display_progress;
    http.send(null); // HERE PROBABLY THE DATA SHOULD BE SENT
}

<form enctype="multipart/form-data" id="upload_form" name="upload_form" method="POST" action="UploaderServlet" onsubmit="upload_file(); return false;" target="upload_target">
Choose a file <br />  
<input name="file" size="27" type="file" id="file" /> <br/> 
<input type="submit" name="uploadSubmitButton" value="Upload" /><br /> 
<br />  
</form> 

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

Вызывается upload_file(), но если я получу его правильно, данные не отправляются. Пожалуйста, совет относительно правильного способа отправки данных.

Ответ 1

Атрибут Pass в форме {url:"",method:"",data:{...},callback:function(){}}

var ajax=function(){
  try{
    var xml       =new XMLHttpRequest();
    var args      =arguments;
    var context   =this;
    var multipart ="";

    xml.open(args[0].method,args[0].url,true);

    if(args[0].method.search(/post/i)!=-1){
      var boundary=Math.random().toString().substr(2);
      xml.setRequestHeader("content-type",
                  "multipart/form-data; charset=utf-8; boundary=" + boundary);
      for(var key in args[0].data){
        multipart += "--" + boundary
                   + "\r\nContent-Disposition: form-data; name=" + key
                   + "\r\nContent-type: application/octet-stream"
                   + "\r\n\r\n" + args[0].data[key] + "\r\n";
      }
      multipart += "--"+boundary+"--\r\n";
    }

    xml.onreadystatechange=function(){
      try{
        if(xml.readyState==4){
          context.txt=xml.responseText;
          context.xml=xml.responseXML;
          args[0].callback();
        }
      }
      catch(e){}
    }

    xml.send(multipart);
  }
  catch(e){}
}

Если вы хотите получить ответ, вы можете использовать этот

var response={};
ajax.call(response,{...args...})

и вы можете получить все данные с помощью response.txt или response.xml

Немного позднее обновление

Что касается вопроса @Varun о загрузке <input type='file'>, этот код не может обрабатывать загрузку файлов напрямую, для отправки файлов с использованием этого кода вам необходимо выполнить предварительную обработку необработанных файлов с помощью File API для получения недвоичных потоков (например, base64 или любой другой формы, подобной bin2hex).

Но, так как это 2015 год, я могу предложить перейти от построения многопоточных потоков к чему-то более надежному, например API FormData.

Ответ 2

Ваш код XMLHttpRequest выглядит отлично, кроме null, который вы переходите в send. Вам необходимо передать строку, содержащую данные для отправки (правильно закодированные, конечно).

Обратите внимание, что если вы хотите отправить файл, на который ссылается ваше поле input[type=file], вам нужно будет прочитать его в памяти, и единственный способ сделать это - использовать новый File API, который пока не поддерживается широко.

Если вы пытаетесь отправить файл с индикатором выполнения, вы можете сделать это, разместив блоки, которые вы прочитали через API файлов в браузере, который поддерживает API файлов, возможно, вернется к Flash- например swfupload, если браузер не поддерживает API файлов и возвращается к обычной отправке формы, если браузер не поддержка Flash.

Ответ 3

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

w Файловый API, в котором ваш XMLHtth пока не поддерживается широко.

Если вы пытаетесь использовать API в браузере, который поддерживает API файлов, возможно, вернемся к загрузчику на основе Flash. Код likpRequest выглядит отлично, кроме нулевого, который вы передаете send.e swfupload, если браузер не работает, t поддерживают API файлов и возвращаются к обычной отправке формы, если браузер не поддерживает отправку файла с индикатором выполнения, вы можете сделать это, разместив блоки, которые вы прочитали с помощью Fit Flash.