使用ajax和jquery提交文件不起作用 - File submission using ajax and jquery not working

File submission using ajax and jquery not working

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

<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只包含文本字段的值

你的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>

获取文件详细信息，

用
代替
print_r($_REQUEST['formdata']);

添加这个
print_r($_FILES['image']);

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()可以很容易地实现这一点。

现在在form .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类型