Как «POST» изображение через xhttp?

Question

я пытаюсь сделать это:

var http = new XMLHttpRequest(); 
    var url = "guardarImg.php"; 
    var params = $('#form').serialize(); 
    http.open("POST", url, true); 
    http.setRequestHeader("Content-type", "multipart/form-data"); 
    http.onreadystatechange = function() { 
     if(http.readyState == 4 && http.status == 200) { 
      alert(http.responseText); 
     } 
    } 
    http.send(params); 

Но не работает, он показывает мне в PHP, что «изображение» не определен, но когда я делаю это через средний Submit она отлично работает.

Все похожие образцы я видел работы со строковыми данными, но мне нужно, чтобы достичь его с изображениями, чтобы заставить его работать позже в Intel XDK

Что I'm делать неправильно? Можете ли вы показать мне образец?

Извините, если мой вопрос слишком прост, я noob с xmlhttp и ajax.

Answer 1

У вас есть правильная идея относительно $ ("# form"). Serialize(), но для беспорядка, который (по-прежнему) загружается AJAX. Yuck (и стыдно за то, что я не заметил эту деталь в первый раз :-().

Проблема с загрузкой файлов через AJAX (как это часто бывает), Internet Explorer. В принципе, она не поддерживала Объект FormData до IE10 (это означает, что если вы заботитесь о поддержке пользователей XP, им лучше работать не-IE). FormData значительно упрощает процесс загрузки файлов через AJAX, а если у вас этого нет, варианты:..

1. Положите немного крошечные IFRAME на странице и управления, что для фактической загрузки файла
2. Encode данные формы программно, используя что-то вроде JSON и отправить, что с помощью JQuery
3. Используйте nice plugin, который обертывает все это для вас (и использует один или несколько из этих методов под обложками).

Я предполагаю, что вы не заботитесь о IE8/9 (почти все остальные не являются проблемой) и дают вам решение FormData. В отличие от предыдущего редактирования, я вхожу в полную функцию здесь, так как это прилично информативно. Это конкретное решение загружает всю форму, вытягивая существующие поля в объект FormData и обрабатывая файлы специально.

<!-- Many ways to skin this particular feline; I like this one :-) --> 
<form onsubmit="return uploadFiles(this)"> 
    <!-- Access from PHP using $_FILES["somefile"]["name"][$idx]... --> 
    <input type="file" name="somefiles" multiple="1" /> 
</form> 

<script> 
    // Function to upload a form via FormData, breaking out files and cutting 
    // any non-named elements. Assumes that there's a #status DIV and the 
    // URL is hardcoded. 
    function uploadFiles(frm) { 
    var formdata = new FormData(); 
    // I'm doing this to separate out the upload content. Note that multiple 
    // files can be uploaded and will appear as a decently-friendly PHP array 
    // in $_FILES. Note also that this does handle multiple files properly 
    // (a default FormData(frm) wouldn't exactly :-(). 
    $(frm).find(":input").each(function(idx, ele) { 
     // This is a file field. Break it out. 
     if(ele.files) { 
     for(i=0; i<ele.files.length; i++) { 
      formdata.append(ele.name + "[" + i + "]", ele.files[i]); 
     } 
     // Not a file element, so put in the upload iff there's a name. 
     } else if(ele.name) { 
     formdata.append(ele.name, ele.value); 
     } 
    }); 
    // Run the AJAX. 
    $.ajax({ 
     url: "test.php",  // Change Me :-) 
     type: "POST", 
     data: formdata, 
     processData: false,  // Need these to keep jQuery from messing up your form 
     contentType: false, 
     success: function(data) { 
       $("#status").html(data); 
       }, 
     error: function(xhr, status, error) { 
       $("#status").html("Error uploading file(s): " + error); 
      }, 
    }); 
    return false; // Keep the form from submitting 
    } 
</script> 

У меня есть полный файл HTML и соответствующий PHP, которые работают в pastebin.

Если бы я был вами, я бы просто использовал Sebastian's jQuery File Upload, если вы можете. У этого есть все, что соответствует современному UI (включая измерение прогресса), абстракцию браузера, и это MIT лицензируется для загрузки. Тем не менее, этот ответ заставит вас идти, если вам просто нужно что-то скопировать. Удачи!