Мне нужно загрузить файл в Chrome и вам нужно ** post ** некоторые параметры с тем же запросом

Question

Мне нужно загрузить файл в Chrome, и вам нужно загрузить некоторые параметры с тем же запросом и нужна базовая аутентификация. Я хочу использовать javascript AJAX для этого. , но хром не поддерживает sendAsBinary, как я могу это сделать?

function sendMsg(status){ 

    var user = localStorage.getObject(CURRENT_USER_KEY); 
    var file = $("#imageFile")[0].files[0]; 

    var boundary = '----multipartformboundary' + (new Date).getTime(); 
    var dashdash = '--'; 
    var crlf  = '\r\n'; 

    /* Build RFC2388 string. */ 
    var builder = ''; 

    builder += dashdash; 
    builder += boundary; 
    builder += crlf; 

    var xhr = new XMLHttpRequest(); 
    var upload = xhr.upload; 
    xhr.onreadystatechange = function(){ 
     if(xhr.readyState==4){ 
      // 
     } 
    }; 

　　if(upload){ 
     upload.onprogress = function(ev){ 
      onprogress(ev); 
     }; 
    } 

    /* Generate headers. [STATUS] */    
    builder += 'Content-Disposition: form-data; name="status"'; 
    builder += crlf; 
    builder += crlf; 

    /* Append form data. */ 
    builder += msg; 
    builder += crlf; 

    /* Write boundary. */ 
    builder += dashdash; 
    builder += boundary; 
    builder += crlf; 

    /* Generate headers. [PIC] */    
    builder += 'Content-Disposition: form-data; name="pic"'; 
    if (file.fileName) { 
     builder += '; filename="' + file.fileName + '"'; 
    } 
    builder += crlf; 

    builder += 'Content-Type: '+file.type; 
    builder += crlf; 
    builder += crlf; 

    /* Append binary data. */ 
    builder += file.getAsBinary(); //chrome do not support getAsBinary() 
    builder += crlf; 

    /* Write boundary. */ 
    builder += dashdash; 
    builder += boundary; 
    builder += crlf; 

    /* Mark end of the request. */ 
    builder += dashdash; 
    builder += boundary; 
    builder += dashdash; 
    builder += crlf; 

    xhr.open("POST", apiUrl.sina.upload, true); 
    xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary); 
    xhr.setRequestHeader('Authorization', make_base_auth_header(user.userName, user.password)); 
    xhr.sendAsBinary(builder); //chrome do not support sendAsBinary() 

    xhr.onload = function(event) { 
     /* If we got an error display it. */ 
     if (xhr.responseText) { 
      console.log(xhr.responseText); 
     } 
    }; 
}; 

Answer 1

Используйте форму для отправки запроса на загрузку файла так же, как вы бы нормально, но поставить перед собой цель в форме скрытого фрейма. Это не обновит страницу, но будет загружать файл. Вы также можете заставить сервер выплюнуть некоторый код JavaScript, который после загрузки в скрытый iframe расскажет вам, когда файл будет загружен. Вот форма:

<iframe name=UploadTarget style="visibility: hidden;"></iframe> 
<form method=post target=MyHiddenIframe action="Upload.php" enctype="multipart/form-data"> 
    <input type=file name=File1> 
    <input type=button value="Upload"> 
</form> 

Чтобы разместить дополнительные Params, я нашел самый простой способ был добавить их в строку действий форме в:

Upload.php?MyVar1=value1&MyVar2=value2 

Насколько я знаю, что нет никакого способа, чтобы прочитать сформировать данные и данные файла в том же запросе, но вы можете прочитать информацию, отправленную по URL-адресу.

Answer 2

Использование xhr.send(FormData). Вам не нужно построить multipart-form-data себя :) Смотрите мой ответ здесь:

Javascript/HTML5 file API reading sequential files into multipart form data

Answer 3

строитель + = file.getAsBinary(); // хром не поддерживают getAsBinary()

Используйте readAsBinaryString метод FileReader API. Chrome поддерживает его.

xhr.sendAsBinary (строитель); // хром действительно не поддерживает sendAsBinary()

Узнайте, как выполнить его по следующим адресам:

http://javascript0.org/wiki/Portable_sendAsBinary

http://code.google.com/p/chromium/issues/detail?id=35705