Загрузка изображения с использованием JSON не работает

Question

Может кто-нибудь помочь моей структуре кода? Что с этим не так?

HTML

 <form method="post">
      <div class="col-md-4">              
        <div class="field name-box">
           <input class="btn" name="image_file" id="image_file" type="file" style="font-size:15px;width:100%;margin-bottom:2px;" required=""/>
        </div>
      </div>     
 </form>

JS

        var form_data = new FormData();

            $.ajax({
                type: "POST",
                url: baseUrlAction() + '?btn=add_product_image',
                data:  form_data,
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){

                    alert("Successfully");

                },
                error: function(ts){
                }           
            });

AJAX_CONTROLLER

public function add_product_image(){

    if(is_array($_FILES)){
        if(is_uploaded_file($_FILES['image_file']['tmp_name'])){
            $sourcePath = $_FILES['image_file']['tmp_name'];
            $targetPath = "product_images/"."sample_img_name".".png";
            if(move_uploaded_file($sourcePath,$targetPath)){
                // echo '<script>alert("Successfully Save")</script>';
            }
        }
    }

}

Но мне было интересно, почему я получу success ответ на мою ajax форму? даже мой upload_file не работает должным образом. Может кто-нибудь мне помочь?

Answer 1

вам нужно добавить данные с form_data в ваш js файл и отправить ответ

formData.append ('image_file', $ ('# image_file') [0] .files [0];) ;

            var form_data = new FormData();
            formData.append('image_file',  $('#image_file')[0].files[0]); 
            $.ajax({
                type: "POST",
                url: baseUrlAction() + '?btn=add_product_image',
                data:  form_data,
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){

                    alert("Successfully");

                },
                error: function(){
                }           
            });

Answer 2

передать элемент Form в FormData

let form = document.getElementById("yourFormId");
var form_data = new FormData(form);