javascript - example - ¿Enviar datos de cadena y de datos de forma conjunta a través de JQuery AJAX?

enviar json por post jquery

Question

¿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?

Answer 1

¡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);
    }
});

Answer 2

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);
        }
    });

Answer 3

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.

Answer 4

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);
         }
     });
 });

Answer 5

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''];
              }
        }

Answer 6

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.

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

Answer 7

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

Answer 8

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)
        {

        }
    });
});

Answer 9

Simplemente tome el formulario en jQuery, repita los elementos y añádalos a los datos del formulario, con el tipo de curso correcto.

Answer 10

    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 .