Jquery Image Upload in Form with Plugin goes Null

问题

I am trying to submit a form, but when it is sent to PHP from jquery ajax, the variable goes null. I have checked with two files, it is just the normal file format is being sent. not the variable which is defined with FancyUploader.

//Note File -> gets passed
<div class="custom-file">
      <input class="custom-file-input" placeholder="Choose Note" name="note" id="note" type="file">
      <label class="custom-file-label">Choose Note</label>
</div>

//Image File -> Comes empty
<div class="input-group mb-3">
     <input class="custom-file-input" placeholder="Product Image" name="prodImage" id="prodImage" type="file">
</div>

and in JavaScript it is initiated with fancy uplaoder : https://www.jqueryscript.net/form/Fancy-File-Uploader-jQuery.html

var image = $('#prodImage').FancyFileUpload({
   maxfilesize : 10000000,
   params : {
       action : 'NewOrder' // Form Name
   },
   autoUpload: false
});

and the form submission happens in jquery is

$("#NewOrder").on('submit', function(e){
    e.preventDefault();
    var fd = new FormData();
    fd.append('prodImage', $(image)[0].files[0]);
    fd.append('note', $("#note")[0].files[0]);
    $.ajax({
            type: 'POST',
            url: 'order/addorder.php',
            data: fd,
            dataType: 'json',
            processData:false,
            contentType: false,
            success: function(response){
                    if(response.status == 1){
                        $('#NewOrder')[0].reset();
                        alert('success');
                    }else{
                        alert('');
                    }
                    $('#NewOrder').css("opacity","");
                    $(".submit").removeAttr("disabled");
           }
    });
});

I tried var_dump($FILES) before / after isset variables, I have received only the note file in my array. Below is the array.

array(1) {
  ["note"]=>
  array(5) {
    ["name"]=>
    string(7) "doc.pdf"
    ["type"]=>
    string(15) "application/pdf"
    ["tmp_name"]=>
    string(24) "C:\xampp\tmp\phpD542.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(174625)
  }
}

Why am I missing the image file. is it probably because of the improper plugin implementation?

Edited: Refer this question for details Jquery Form Submission with Image

来源：https://stackoverflow.com/questions/64369548/jquery-image-upload-in-form-with-plugin-goes-null

标签

javascript

php

jquery

ajax

jquery-plugins