如何通过ajax php将图像上传到服务器本地目录，其中html表单haven'；t任何传统的提交按钮 - How to upload an image to server local dir by ajax php, where html form haven't any traditional submit button

How to upload an image to server local dir by ajax php, where html form haven't any traditional submit button

HTML表单代码（localhost/oem/foo.HTML）

<form id="formUpload">
  <input id="photo" type="file"/>
</form>`
<div onclick='formSubmit()'>
  Upload Photo Now
</div>

JS/JQuery代码（页面脚本）

<script>
  $(document).ready(function(e){
    $('#formUpload').submit(function(e){
    e.preventDefault();
    $.ajax({ url:'/oem/response.php',
      type: 'POST', data: new FormData(this),
      contentType: false, cache:false, processData: false,
    success: function(data){
      alert("Upload Successfully");
     }
    });
   });
  });
  function formSubmit(){
    $('formUpload').submit();`
  }
</script>

PHP代码（localhost/oem/response.PHP）

$sourcePath = $_FILES['file']['tmp_name'];
$targetPath = "oem/images/".&_FILE['file']['name'];
move_uploaded_file($sourcePath,$targetPath
);

但它不会像我希望的那样工作，它在重定向后向我显示了一个空白页面。

我的问题：主要问题是什么以及如何解决？

您不能将传统表单提交与ajax混合使用！你有两个选择：

使用经典的表单submit和$（"form"）.submit（）。
将ajax与FormData结合使用。如果您需要在ajax之后更改页面完成后，您可以使用window.location.href.

示例：

1）经典提交

$("button").click(function() {
  $("form").submit(); // This will upload all fields and images in <input type='file'/>
});

2） Ajax

FormData formData= new FormData();
data.append("image", $("#image-input").prop("files")[0]);
$.ajax({..., data: formData, ...});