jquery - 使用 ajax 上传图像文件不起作用

Question

I want to submit my image via jquery and ajax, this is my code:

    <form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $base_url ?>admin/resid.php" method="post">
    <input type="file" accept="image/*" id="imguploadresid" /> 
</form>

<Script>

$("#imguploadresid").on("change", function() {
        $("#imageUploadForm").submit();
});
    
$('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();

        var form = $('#imageUploadForm')[0];
        var formData = new FormData(form);
  
        $.ajax({
            type:'POST',
            url: "<?php echo $base_url ?>admin/resid.php",
            data:formData,
            cache:false,
            enctype: 'multipart/form-data',
            contentType: false,
            processData: false,
            success:function(data){
                console.log("succes")
            },
            error: function(data){
                console.log("error");
            }
        });
    }));

just to add some explanation, when the use choose an image, the form submits immediately.

it works fine and post the data to my php page, but it's empty and has no data

I put print_R($_POST) in my page and the result is

Array

( )

I logged the ajax post and there was no data posting.

what is the problem?

Answer 1

Your image is probably in PHP array $_FILES. You must download your file from it to get your image.

$yourImage = file_get_contents($_FILES['image']['tmp_name']);

You have also to add "name" attribute to your input:

<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $base_url ?>admin/resid.php" method="post">
  <input name="image" type="file" accept="image/*" id="imguploadresid" /> 
</form>