使用 JSON 上传图像不起作用答案

【问题标题】：Uploading Image Using JSON is not Working使用 JSON 上传图像不起作用
【发布时间】：2020-04-08 05:12:29
【问题描述】：

谁能帮助我的代码结构？它出什么问题了？

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>

        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 也无法正常工作。谁能帮我？

【问题讨论】：

AJAX 仅在您的服务器以非 200 状态代码响应、服务器上的处理超时或由于网络错误时才运行错误处理。如果您希望 AJAX 由于某些处理错误而失败，您必须设置响应状态，例如。 500，在 PHP 中手动。
是的，先生。我试图将这些东西“console.log(ts.responseText)”放在我的错误处理中，但我仍然没有收到错误。它会响应“成功”。
是的，但是只有当服务器发生致命错误，或者浏览器等待响应的时间超过，或者连接失败，包括404页面未找到错误时，AJAX调用才会失败. PHP 执行期间的警告和异常不会导致 AJAX 失败。
您的文件未发送到服务器。见 var form_data = new FormData();传递表单或将文件输入控件附加到 FormData()

标签： javascript html json ajax

【解决方案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(){
                }           
            });

【讨论】：

【解决方案2】：

将表单元素传递给 FormData

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

【讨论】：

应用后有什么问题？
没有任何反应，图像仍未上传。 :(
分享print '<pre>'; print_r($_FILES);的输出