AJAX를 통해 이미지 전송

Question

AJAX를 사용하여 설치 마법사를 만들고 있습니다. 총 6 단계로 구성된 여러 단계의 양식 제출입니다. 1-5 단계는 정상적으로 작동하며 양식 필드 일 뿐이며 텍스트 만 제출합니다. 마지막 단계 인 6 단계에서는 사용자가 7 개의 이미지를 업로드 할 수 있습니다. 이 단계는 작동하지 않습니다. I get a 500 Internal Server Error

JSON을 통해 이미지 데이터를 올바르게 전달합니까? 내가 잘못하고있는 일이나 잊고있는 일이 있습니까?

관련 코드는 다음과 같습니다 :

HTML (6 단계 만 해당)

<form action="/ajax/wizard.php/<?php echo $userName ?>?step=3" 
class="defaultRequest" enctype="multipart/form-data" method="post"> 

<input type="hidden" name="token" value="<?php echo $token; ?>"/> 

<fieldset> 
    <p><label>Profile Picture</label> 
    <input type="file" name="pPic" value="" /></p> 

    <p><label><a href="#help-username" class="show_helper"><span>(?)</span> 
    Pic 1</a></label> <input type="file" name="Album1" value="" /> 
    </p> 

    <p><label><a href="#help-password" class="show_helper"><span>(?)</span> 
    Pic 2</a></label><input type="file" name="Album2" value="" /> 
    </p> 

    <p><label>Pic 3</label> 
    <input type="file" name="Album3" value="" /></p> 

    <p><label>Pic 4</label> 
    <input type="file" name="Album4" value="" /></p> 

    <p><label>Pic 5</label> 
    <input type="file" name="Album5" value="" /></p> 

    <p><label>Pic 6</label> 
    <input type="file" name="Album6" value="" /></p> 

</fieldset> 

<fieldset> 
    <p><label>&nbsp;</label> 
    <button type="submit"><span>Upload Images</span></button></p> 
</fieldset> 

JS

$.ajax({ 
type: 'POST', 
url: requestUrl, 
data: $(this).serialize(), 
dataType: 'json', 
success: function(data) { 

      if(data.response){ 
       $('div.errormsg').remove(); 
       $(eventHeadline).html(data.eventHeadline); 
       console.log(data.eventHeadline); 
       //$(eventDate).html(data.eventName); 

       if(data.step){ 
        openStep(data.step); 
       }else{ 
         openStep('next'); 
       } 
      }else{ 
       $('div.errormsg').remove(); 
       $('<div class="errormsg">'+data.message+"</div>").insertBefore(form); 
      } 

Answer 1

파일 필드, JSON에 편리하게 직렬화 업로드하기 위해하지 않습니다 그것들을 사용하면 객체를 생성해야합니다.이 객체는 jQuery가 processData: false을 사용하여 데이터 객체를 처리하는 것을 방지하는 한 jQuery를 사용하여 업로드 할 수 있습니다. 그러나 이것은 최신 브라우저 중 일부에서만 작동합니다 : http://caniuse.com/#search=formdata

이전 브라우저/IE에서 jQuery로 파일 업로드를 지원하려면 가장 좋은 방법은 표준 POST를 사용하여 파일을 업로드하는 플러그인을 찾는 것입니다. jQuery 콜백으로 돌아가십시오. 다음은 몇 가지를 제공합니다 : https://www.google.co.uk/search?q=jquery+file+upload+plugin