使用ajax submit并返回false

时间:2016-04-22 11:29:24

标签: php jquery ajax

我有一个简单文件输入的表单。

<form id="uploadFile" name="uploadFile" action="addFile.php" method="POST" enctype="multipart/form-data">
    <input type="hidden" value="" name="uploadWUID" id="uploadWUID">
    <p>Please upload a signed and completed write-up in PDF format.  Please file the hardcopy of the write-up per company policy.</p>
    <div class="input-group" style="margin-bottom:7px;">
        <span class="input-group-btn">
            <span class="btn btn-primary btn-file">
                Browse&hellip; <input type="file" id="reportImport" name="reportImport">
            </span>
        </span>
        <input type="text" class="form-control" readonly>
    </div>
</form>

有一些本地javascript将文件名放在文本输入中,但PHP文件中没有使用文本输入。

uploadWUID是动态设置的,用于将上传的文件添加到数据库中的特定记录中。

当我提交表格时,它运作得很好。我的浏览器重定向到addFile.php,成功被回显,文件被移动到正确的目录,数据库也被更新。

当我将return false添加到我的ajax表单提交时,我的问题就出现了。我从php文件中收到错误,说明在处理$ filename = $ _FILES [&#39; reportImport&#39;] [&#39; name&#39;]时无法找到索引。我的上传/数据库更新失败。

$('#uploadFile').submit(function() {
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) {}
    });
    return false;
});

1 个答案:

答案 0 :(得分:2)

更改脚本代码

$('#uploadFile').submit(function() {
        var formData = new FormData($(this)[0]);              
        $.ajax({
          data: formData,
          type: $(this).attr('method'),
          url: $(this).attr('action'),
          processData: false,  // tell jQuery not to process the data
          contentType: false,  // tell jQuery not to set contentType
          success: function(response) {
             console.log(response);
             alert(response);
             return false
          }
        });
     return false;
 });