通过JQuery AJAX一起发送FormData和String数据？

我怎样才能张贴文件和FormData()inputstring数据？ 例如，我有很多其他隐藏的input数据 ，我需要他们发送到服务器，

HTML，

 <form action="image.php" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple="" /> <input type="hidden" name="page_id" value="<?php echo $page_id;?>"/> <input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/> <input type="hidden" name="method" value="upload"/> <input type="hidden" name="required[category_id]" value="Category ID"/> </form> 

通过下面的代码，我只pipe理发送文件数据， 而不是隐藏的input数据。

jQuery的，

 // HTML5 form data object. var fd = new FormData(); var file_data = object.get(0).files[i]; var other_data = $('form').serialize(); // page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID fd.append("file", file_data); $.ajax({ url: 'add.php', data: fd, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } }); 

server.php

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

结果，

 Array ( [file] => Array ( [name] => xxx.doc [type] => application/msword [tmp_name] => C:\wamp\tmp\php7C24.tmp [error] => 0 [size] => 11776 ) ) 

我想这是我的结果，

 Array ( [file] => Array ( [name] => xxx.doc [type] => application/msword [tmp_name] => C:\wamp\tmp\php7C24.tmp [error] => 0 [size] => 11776 ) ) Array ( [page_id] => 1000 [category_id] => 12 [method] => upload ... ) 

可能吗？

Answer 1

  var fd = new FormData(); var file_data = $('input[type="file"]')[0].files; // for multiple files for(var i = 0;i<file_data.length;i++){ fd.append("file_"+i, file_data[i]); } var other_data = $('form').serializeArray(); $.each(other_data,function(key,input){ fd.append(input.name,input.value); }); $.ajax({ url: 'test.php', data: fd, contentType: false, processData: false, type: 'POST', success: function(data){ console.log(data); } }); 

添加一个for循环并将.serialize()更改为.serialize()以便在.serializeArray()中的对象引用附加到FormData 。

Answer 2

好吧，作为一个更简单的select和更短，你也可以这样做！

 var fd = new FormData(); var file_data = object.get(0).files[i]; var other_data = $('form').serialize(); //page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID fd.append("file", file_data); $.ajax({ url: 'add.php?'+ other_data, //<== just add it to the end of url *** data: fd, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } }); 

Answer 3

我总是使用这个。它使用ajax发送表单数据

 $(document).on("submit", "form", function(event) { event.preventDefault(); var url=$(this).attr("action"); $.ajax({ url: url, type: 'POST', data: new FormData(this), processData: false, contentType: false, success: function (data, status) { } }); }); 

Answer 4

我尝试与我的朋友提供我的代码协作。 从这个论坛修改。

 $('#upload').on('click', function() { var fd = new FormData(); var c=0; var file_data,arr; $('input[type="file"]').each(function(){ file_data = $('input[type="file"]')[c].files; // get multiple files from input file console.log(file_data); for(var i = 0;i<file_data.length;i++){ fd.append('arr[]', file_data[i]); // we can put more than 1 image file } c++; }); $.ajax({ url: 'test.php', data: fd, contentType: false, processData: false, type: 'POST', success: function(data){ console.log(data); } }); }); 

这是我的HTML文件

 <form name="form" id="form" method="post" enctype="multipart/form-data"> <input type="file" name="file[]"multiple> <input type="button" name="submit" value="upload" id="upload"> 

这个php代码文件

 <?php $count = count($_FILES['arr']['name']); // arr from fd.append('arr[]') var_dump($count); echo $count; var_dump($_FILES['arr']); if ( $count == 0 ) { echo 'Error: ' . $_FILES['arr']['error'][0] . '<br>'; } else { $i = 0; for ($i = 0; $i < $count; $i++) { move_uploaded_file($_FILES['arr']['tmp_name'][$i], 'uploads/' . $_FILES['arr']['name'][$i]); } } ?> 

我希望有同样问题的人能够快速解决这个问题。 我因为多次上传图片而头疼。

Answer 5

你可以试试这个：

 var fd = new FormData(); var data = []; //<---------------declare array here var file_data = object.get(0).files[i]; var other_data = $('form').serialize(); data.push(file_data); //<----------------push the data here data.push(other_data); //<----------------and this data too fd.append("file", data); //<---------then append this data 

Answer 6

根据我的理解，您希望将图像和input的值一起发送。 这个代码适合我，我希望它能帮助未来的人。

 <form id="my-form" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple="" /> <input type="hidden" name="page_id" value="<?php echo $page_id;?>"/> <input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/> <input type="hidden" name="method" value="upload"/> <input type="hidden" name="required[category_id]" value="Category ID"/> </form> 

–

 jQuery.ajax({ url: 'post.php', data: new FormData($('#my-form')[0]), cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ console.log(data); }}); 

看看我的短代码的Ajax多预览上传。

https://santanamic.github.io/ajax-multiple-upload/

Answer 7

对于多文件input：试试这个代码：

  <form name="form" id="form" method="post" enctype="multipart/form-data"> <input type="file" name="file[]"> <input type="file" name="file[]" > <input type="text" name="name" id="name"> <input type="text" name="name1" id="name1"> <input type="button" name="submit" value="upload" id="upload"> </form> $('#upload').on('click', function() { var fd = new FormData(); var c=0; var file_data; $('input[type="file"]').each(function(){ file_data = $('input[type="file"]')[c].files; // for multiple files for(var i = 0;i<file_data.length;i++){ fd.append("file_"+c, file_data[i]); } c++; }); var other_data = $('form').serializeArray(); $.each(other_data,function(key,input){ fd.append(input.name,input.value); }); $.ajax({ url: 'work.php', data: fd, contentType: false, processData: false, type: 'POST', success: function(data){ console.log(data); } }); }); 

Answer 8

只需在jQuery中形成表单，迭代元素并将其附加到表单数据中，并使用正确的types。