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，为了上传它们，您需要创建一个FormData对象，只要您阻止jQuery使用jQuery处理数据对象，就可以使用jQuery上传该对象processData: false。这只适用于一些最新的浏览器：http://caniuse.com/#search=formdata

为了支持使用旧版浏览器/ IE的jQuery上传文件，最好的办法是找到一个使用标准POST上传文件并将其与jQuery回调联系起来的插件 - 这应该为您提供以下几点： https://www.google.co.uk/search?q=jquery+file+upload+plugin

通过AJAX传输图像

1 个答案: