繁体   English   中英

Ajax提交带有文件的表格

[英]ajax submit form with file

我有带有ajax的表单,其中包含textarea和上载文件字段

我只能提交其中之一。

我该如何解决?

我想将“ info” +“ filesData”发送到服务器。 请指教。 谢谢高级

AJAX:

$(function() {
    $("#submit").click(function() {

    var file_data = $('#files').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    var files_data =  form_data;
    alert(files_data);      


    var act = 'add';
    var $form = $("#addCommentForm");
    var info =  $form.serialize();
    info += '&act=' + act ;  
    alert(info);

    $.ajax({
           type: "POST",
           url: "ajax/addPost.php",

           dataType: 'text',  // what to expect back from the PHP script, if anything
           cache: false,
           contentType: false,
           processData: false,  

           data: files_data,
           success: function(data)
           {
            //   alert(data); // show response from the php script.
                $('#commentsBox').html(data);
                 $("#addCommentForm")[0].reset(); 

           }

         });

    return false; 
});
}); 

HTML:

<form class="form-horizontal" action='#' method="post" id="addCommentForm" enctype="multipart/form-data">

    <div class="form-group">
        <div class="col-md-8 col-xs-12">
            <textarea class="form-control" name="post[text]"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-8 col-xs-12">
            <input type="file" class="form-control" name="file" id="files">
        </div>
    </div>                                  
    <div class="form-group">
        <label class="col-xs-2 control-label" for="textinput"></label>  
        <div class="col-md-8 col-xs-12">
            <a class="btn btn-primary" id="submit">submit</a>
        </div>
    </div>                                      
</form>

的PHP

print_r ($_FILES);
print_r ($_POST);

在$ .ajax调用中,将数据参数(filesData)的值替换为:

{ field1 : field1value, field2 : field2value, .... }

根据需要使用任意数量的字段/值对

您还可以像这样直接获取值:

{ field1 : $('#commentsBox').text(), field2 : $('#yourinput').val(), .... }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM