AJAX загрузить изображение с другими данными в форме

Question

моя проблема: я хочу загрузить image/pdf с помощью ajax. В моем коде у меня есть несколько входов, но я не использую FormData() для передачи данных из input в мой upload.php. Все работают отлично. Так что вот для лучшего представьте:

$('#addData').on('click', function(){

        var c_zakazky = $('#c_zakazky').val();
        var pozicia = $('#pozicia').val();
        var p_cislo = $('#p_cislo').val();
        var stav = $('#stav').val();
        var tech = $('#tech').val();
        var zar = $('#zar').val();
        var operator = $('#op').val();

        var d = new Date();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var datum = d.getFullYear() + '-' + (month<10 ? '0' : '') + month + '-' + (day<10 ? '0' : '') + day;

        //alert(dokument);

        $.ajax({
            url: 'add.php',
            type: 'POST',
            processData: false,
            contentType: false,
            data: {
                otk: 1,
                c_zakazky: c_zakazky,
                pozicia: pozicia,
                p_cislo: p_cislo,
                stav: stav,
                tech: tech,
                zar: zar,
                operator: operator,
                datum: datum
            },
            success: function(data){
                $('#live_data').html(data);
                $('#modalInsert').modal('hide');

                $('#c_zakazky').val();
                $('#pozicia').val();
                $('#p_cislo').val();
                $('#stav').val();
                $('#tech').val();
                $('#zar').val();
                $('#op').val();
                $('#dokument').val();

                fetch_data_otk();
                alert(data);
            }
        });
    });

А теперь, если я хочу включить изображение в это, как это сделать? Я пытался добавить это:

var data = new FormData();
        data.append('image', $('#image').prop('files')[0]);
        console.log(data);

но когда я выбираю изображение / pdf и нажимаю «загрузить» в консоли (данные) пусто, и я не знаю, как это сделать.

Answer 1

Так что спасибо за помощь. Теперь это работает отлично. РЕШЕНИЕ:

Я изменил только скрипт (код php все тот же)

//pridanie udajov
    $('#addData').on('click', function(){

        var fileInput = document.querySelector('form input[type=file]');
        var attachment = fileInput.files[0];

        var d = new Date();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var datum = d.getFullYear() + '-' + (month<10 ? '0' : '') + month + '-' + (day<10 ? '0' : '') + day;

        var formData = new FormData();

        formData.append('otk', 1);
        formData.append('c_zakazky', $('#c_zakazky').val());
        formData.append('pozicia', $('#pozicia').val());
        formData.append('p_cislo', $('#p_cislo').val());
        formData.append('stav', $('#stav').val());
        formData.append('tech', $('#tech').val());
        formData.append('zar', $('#zar').val());
        formData.append('op', $('#op').val());
        formData.append('datum', datum);
        formData.append('image', $('#image').prop('files')[0]);

        console.log(formData);

        $.ajax({
            url: 'add.php',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data){
                $('#live_data').html(data);
                $('#modalInsert').modal('hide');

                $('#c_zakazky').val();
                $('#pozicia').val();
                $('#p_cislo').val();
                $('#stav').val();
                $('#tech').val();
                $('#zar').val();
                $('#op').val();
                $('#dokument').val();

                fetch_data_otk();
                alert(data);
            }
        });
    });

Answer 2

это то, что я делаю и работаю, добавляю данные формы,

var formData = new FormData(your_form);
 // for multiple files , because i need to check

new_files - это класс, я использую его, потому что я создаю форму, динамически добавляем также динамические данные

$.each($(".new_files"), function (i, obj) {
//                console.log(obj.files);
        $.each(obj.files, function (j, file) {
              var max_size = 5120000;
              var file_type= file.type;
              var match = ["image/jpeg", "image/png", "image/jpg", "application/pdf"];
            // after validation etc
       //   append formdata
           formData.append('file[' + j + ']', file);
            });
  });
  // if you want something else, 
  formData.append("id", $('#kreditornr').val());
  // ajax

  $.ajax({
     type: "POST",
     url: "url",
     data: formData,
     contentType: false, // The content type used when sending data to the server.
     cache: false, // To unable request pages to be cached
     processData: false, // To send DOMDocument or non processed data file it is set to false
       success: function (data) {
          // success
       }
    });

Answer 3

Я не могу понять, что именно вы хотите, но, пожалуйста, попробуйте следующий код, он отправит все данные элементов формы:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&post1&post2",
    success : function(){
    },
    error : function(){
   }
}

OR

$.ajax({
  url: 'url',
  type: "POST",
  data:  new FormData(this),
  success : function(){
  },
  error : function(){
  }
});

Answer 4

Пожалуйста, ознакомьтесь с примером кода, чтобы сохранить ваши данные и файлы изображений / мультимедиа в form_data, а затем используйте AJAX для сохранения указанных данных в серверной части

<!DOCTYPE html>
        <head>
            <title>Example</title>
        </head>

        <body>
            <form enctype="multipart/form-data" id="add-hotel-form">
                <div class="form-group col-md-12">
                    <label for="hotel">Upload Hotel Images</label>
                    <input type="file" class="form-control-file" id="upload_img" name="img_url" multiple>
                </div>

                <input type="button" class="btn btn-primary" name="submit" value="Submit" onclick="myfunction();">
            </form>
        </body>

        <script>
        function myfunction(){

            var form_data = new FormData();

            var image = document.getElementById('upload_img').files.length;


            for (var x = 0; x < image; x++) {
                form_data.append("image", document.getElementById('upload_img1').files[x]);
            }

            $.ajax({
                url : 'your-backend-file-with-DB-Query.php',
                method : 'POST',// OR GET
                data: form_data,
                dataType: 'json',
                success:function(data) {

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                    alert("responseText: "+xhr.responseText);
                }

            }); 
        }
        </script>
    </html>

Answer 5

Пожалуйста, попробуйте это, если вы хотите console formdata атрибуты объекта.

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}