jQuery FormData 및 파일

Question

아약스 파일 업로드를 시도하고 있습니다. 변수 form_data을 확인할 때 변수가 비어 있습니까?

<form action='ajax_image_upload/process.php' method='post' enctype='multipart/form-data' class='upload_form'> 
    <textarea name='description' placeholder='Type Default Video Description'></textarea> 
    <span> 
    Channel Image: <input type='file' name='image' /> 
    </span> 
    <input name='__submit__' type='submit' value='Upload'/> 
</form> 

var container = $(".upload_form"); 
var form_data = new FormData();  
form_data.append('image', container.find("form > span").children("input[name='image']")); 

var post_url = container.children("form").attr("action"); //get action URL of form 

//jQuery Ajax to Post form data 
$.ajax({ 
    url : post_url, 
    type: "POST", 
    data: form_data, 
    contentType: false, 
    cache: false, 
    processData: false, 
    mimeType: "multipart/form-data" 
}).done(function(res){ 
}); 

나는이 문제를 어떻게 해결할 수 있습니까?

Answer 1

파일 입력의 이진 데이터를 jQuery 객체가 아닌 FormData에 추가해야하기 때문에 문제가 발생합니다. 이 시도 :

var fileData = container.find("form > span").children("input[name='image']")[0].files[0]; 
form_data.append('image', fileData); 

물론, 다중 입력, 또는 입력 내에서 여러 개의 파일이있는 경우, 당신은 그들을 통해 루프를 필요로하고 개별적으로 추가 할 수 있습니다.