通過AJAX傳輸圖片

我正在使用AJAX創建設置嚮導。這是一個多步驟表單提交，共有6個步驟。步驟1-5工作正常，他們只是表單域，只提交文本。最後一步，第6步，將允許用戶上傳7個圖像。這一步不起作用。 I get a 500 Internal Server Error通過AJAX傳輸圖片

我是否通過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>

$.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); 
      }

來源

2012-08-08 Paul Dessert

http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html – 2012-08-08 06:53:03

@Pushpesh - 謝謝你鏈接！ – 2012-08-08 07:01:35

文件中的字段不方便序列化到JSON，以便上傳他們需要創建一個FormData對象，只要您阻止jQuery使用processData: false來處理數據對象，就可以使用jQuery進行上傳。但這隻適用於一些最新的瀏覽器：http://caniuse.com/#search=formdata

爲了支持使用舊版瀏覽器/ IE瀏覽器的jQuery文件上傳，最好的方法是找到一個使用標準POST和關係上傳文件的插件它回到jQuery回調 - 這應該爲您提供幾個：https://www.google.co.uk/search?q=jquery+file+upload+plugin

來源

2012-08-08 06:50:23 steveukx

感謝您的信息！ – 2012-08-08 07:01:16

通過AJAX傳輸圖片

回答

相關問題