Question

我必须使用ajax提交表单。该表单包含text field和file upload field。但在ajax page(formaction.php) file details are not getting.

HTML

<form method="post" id="newform" enctype="multipart/form-data">
  Name:<input type="text" id="txt" name="txt"><br>
  File:<input type="file" id="image" name="image"><br>
  <input type="submit" id="btn" value='Proceed'>
</form>

的jQuery

$(document).ready(function(){
    $("#btn").click(function(event){
        event.preventDefault();
        var formdata = $('form#newform').serialize();
        $.post("formaction.php",{formdata:formdata},function(data){
            alert(data);
        });
    });
});

formaction.php

print_r($_REQUEST['formdata']);

input type file详细信息未进入ajax页面。 formdata仅包含文本字段的值。

Answer 1

要获取文件详细信息，

而不是这个，

print_r($_REQUEST['formdata']);

添加此

print_r($_FILES['image']);

Answer 2

你的jquery必须改变如下：

    <script type="text/javascript">
    function submitForm() {
        console.log("submit event");
        var fd = new FormData(document.getElementById("fileinfo"));
        fd.append("label", "WEBUPLOAD");
        $.ajax({
          url: "formaction.php",
          type: "POST",
          data: fd,
          enctype: 'multipart/form-data',
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    }
</script>

Answer 3

serialize()不会在表单数据中包含文件输入。你必须手动完成。

$("#btn").click(function(event) {
    event.preventDefault();

    var form_data = new FormData(document.getElementById('newform'));

    // Now you have your DataObject setup.
    $.ajax({
        url: 'formaction.php',
        type: 'POST',
        cache : false,
        contentType: false, // Important.
        processData: false, // Important.
        data: form_data
    })
    .done(function(data) {
        console.log(data);
    })
    .fail(function(data) {
        console.log(data);
    });

    return false;
});

使用$.ajax()，您可以轻松实现这一目标。

现在在formaction.php中：您可以像普通表单提交那样获取值。

$txt = $_POST['txt'];
$image = $_FILES['image'];

注意：请注意contentType: false和processData: false

如果您不提供processData: false，则ajax将在控制台"Illegal invocation."中返回错误

如果您不提供contentType: false，那么该文件将以content-disposition和content-type: 'application/pdf'或您上传的任何mime类型以编码和原始方式提交。

使用ajax和jquery无法正常工作的文件提交

3 个答案: