javascript - example - ¿Enviar datos de cadena y de datos de forma conjunta a través de JQuery AJAX?
enviar json por post jquery (10)
¿Cómo puedo enviar archivos e ingresar datos de cadena con FormData() ? Por ejemplo, tengo muchos otros datos de entrada ocultos que necesito que sean enviados al servidor,
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>
Con este código a continuación, solo logro enviar los datos del archivo pero no los datos de entrada ocultos.
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);
resultado,
Array
(
[file] => Array
(
[name] => xxx.doc
[type] => application/msword
[tmp_name] => C:/wamp/tmp/php7C24.tmp
[error] => 0
[size] => 11776
)
)
Me gustaría obtener esto como mi resultado,
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
...
)
¿Es posible?
¡Bien, como una alternativa más fácil y más corta, usted podría hacer esto también!
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);
}
});
Descubrí que, si de alguna manera (como su ModelState es falso en el servidor) y la publicación de la página nuevamente en el servidor, estaba tomando un valor anterior para el servidor. Entonces encontré esa solución para eso.
var data = new FormData();
$.each($form.serializeArray(), function (key, input) {
if (data.has(input.name)) {
data.set(input.name, input.value);
} else {
data.append(input.name, input.value);
}
});
Intento contribuir mi colaboración de código con mi amigo. modificación de este foro.
$(''#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);
}
});
});
este es mi archivo 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">
este archivo de código 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]);
}
}
?>
Espero que las personas con el mismo problema puedan resolver rápidamente este problema. Tengo dolor de cabeza porque la imagen de carga múltiple.
Para entrada de archivo múltiple: pruebe este código:
<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);
}
});
});
Para varios archivos en ajax prueba esto
var url = "your_url";
var data = $(''#form'').serialize();
var form_data = new FormData();
//get the length of file inputs
var length = $(''input[type="file"]'').length;
for(var i = 0;i<length;i++){
file_data = $(''input[type="file"]'')[i].files;
form_data.append("file_"+i, file_data[0]);
}
// for other data
form_data.append("data",data);
$.ajax({
url: url,
type: "POST",
data: form_data,
cache: false,
contentType: false, //important
processData: false, //important
success: function (data) {
//do something
}
})
En php
parse_str($_POST[''data''], $_POST);
for($i=0;$i<count($_FILES);$i++){
if(isset($_FILES[''file_''.$i])){
$file = $_FILES[''file_''.$i];
$file_name = $file[''name''];
$file_type = $file [''type''];
$file_size = $file [''size''];
$file_path = $file [''tmp_name''];
}
}
Por lo que entiendo, le gustaría enviar las imágenes y los valores de las entradas juntas. Este código funciona bien para mí, espero que ayude a alguien en el futuro.
<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);
}});
Eche un vistazo a mi código corto para ajax carga múltiple con vista previa.
Puedes intentar esto:
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
Siempre uso esto. Envía datos de formulario usando 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)
{
}
});
});
Simplemente tome el formulario en jQuery, repita los elementos y añádalos a los datos del formulario, con el tipo de curso correcto.
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);
}
});
Se agregó un ciclo for y se cambió .serialize() a .serializeArray() para referencia de objeto en .each() para anexar a FormData .