How to send Image and Text with JQuery AJAX

Question

My Code like below, that is a form to input a Text and Image.

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

Then the Ajax JQuery script like below, I Wanted to send Image and Text for 1 Ajax Syntax.

$('#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();
                    }
                });

            });

Then in encrypt.php is like

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

But it doesn't work for upload the Image in local directory for test. How does the right codes?

The error is

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

I believe you could do it like this :

$( '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();

});

Setting processData to false lets you prevent jQuery from automatically transforming the data into a query string. See the docs for more info. Setting the contentType to false is imperative, since otherwise jQuery will set it incorrectly.