Как отправить изображение и текст с JQuery AJAX

Question

Мой код, как показано ниже, это форма для ввода текста и изображения.

<div id="encrypt_function" style="display:none">
        <div class="form-group">
            <label for="gambar">Gambar:</label>
            <input type="file" accept=="image/*" name="gambar" id="gambar">
        </div>
        <div class="form-group">
            <label for="plaintext">Plaintext:</label>
            <input type="text" class="form-control" placeholder="Message to Encryption" id="plaintext">
        </div>
        <button type="submit" class="btn btn-primary" id="submit_encrypt">Submit</button>
        <div class="form-group" id="pk_result" style="display:none">
            <label for="Public Key Result">Public Key</label>
            <textarea class="form-control" id="pkvalue" rows="3"></textarea>
        </div>
    </div>

Затем скрипт Ajax JQuery, как показано ниже, хотел отправить изображение и текст для синтаксиса 1 Ajax.

$('#submit_encrypt').click(function(){
                var plaintext = $('#plaintext').val();
                var file_data = $('#gambar').prop('files')[0];
                var gambar = new FormData();
                gambar.append('file', file_data);
                $.ajax({
                    url: 'encrypt.php', // point to server-side controller method
                    dataType: 'text', // what to expect back from the server
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: {gambar, 'plaintext' : plaintext},
                    type: 'POST',
                    beforeSend: function(){

                    },
                    success: function (data) {
                        $("#pk_result").html(data);
                        $("#pk_result").show();
                    }
                });

            });

Затем в зашифрованном виде. php похоже на

$img_tmp = $_FILES['gambar']['tmp_name'];
$img_name = $_FILES['gambar']['name'];
move_uploaded_file($img_tmp, 'Gambar/'.$img_name);

Но это не работает для загрузки изображения в локальный каталог для тестирования. Как работает правильный код?

Ошибка

Notice: Undefined index: gambar in C:\xampp\htdocs\Tugas Akhir\encrypt.php on line 7

Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\Tugas Akhir\encrypt.php on line 7

Notice: Undefined index: gambar in C:\xampp\htdocs\Tugas Akhir\encrypt.php on line 8

Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\Tugas Akhir\encrypt.php on line 8

Answer 1

Полагаю, вы могли бы сделать это следующим образом:

$( 'form' ).submit(function ( e ) {
    var data;

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});
e.preventDefault();

});

Установка для processData значения false позволяет предотвратить автоматическое преобразование данных jQuery в Строка запроса. Смотрите документы для получения дополнительной информации. Установка для свойства contentType значения false является обязательной, поскольку в противном случае jQuery установит его неправильно.