javascript - 使用 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>';
            }
        }
    }

}

但我一直想知道为什么我的 ajax 表单会收到 success 响应？甚至我的 upload_file 也无法正常工作。谁能帮我？

Answer 1

您需要在 js 文件中使用 form_data 附加数据并发送响应

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(){
                }           
            });