通过ajax上传一个图像时出错 - Error on uploading one image by ajax

Error on uploading one image by ajax

本文关键字：一个图像出错 ajax 通过 | 更新日期: 2023-09-27

im在通过ajax上传单个文件时遇到问题。这是我的密码。

JS文件

var _submit = document.getElementById('fileInputBox');
var formData = new FormData();
formData.append('upload', 'upload'); 
formData.append('SelectedFile', _submit.files[0]);
$('#fileInputBox').on('change', function (e) {
  e.preventDefault();
  $.ajax({
    url: 'upload2.php',
    type: 'POST',
    data: formData,
    dataType: 'json' ,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
       $('#sep_s').html(data.msg); 
    }
 });
  // return false;
});

HTML文件

  <form action="" method="post" enctype="multipart/form-data" name="UploadForm" id="UploadForm">
     <div id="AddFileInputBox">
          <input id="fileInputBox" style="margin-bottom: 5px;" type="file"  name="file"/>
     </div>
  </form>

PHP文件

  if(isset($_POST['upload']))
  {
     $ImageName         = $_FILES['file']['name'];
     $ImageSize         = $_FILES['file']['size'];
        $TempSrc        = $_FILES['file']['tmp_name'];
      $ImageType        = $_FILES['file']['type'];
    ..........

我得到的错误是

注意：未定义的索引：G:''installed here''upload2.php中的文件16
行注意：未定义的索引：G:''installed here''upload2.php中的文件17行
等等

这里怎么了？

我可以看到的一个问题是，在页面加载时附加图像，而不是在实际设置/更改图像时。

您应该将该代码放入事件处理程序中：

$('#fileInputBox').on('change', function () {
  // put this inside the function so that its get set when you assign a value
  var _submit = document.getElementById('fileInputBox');
  var formData = new FormData();
  formData.append('upload', 'upload'); 
  formData.append('SelectedFile', _submit.files[0]);
  $.ajax({
    url: 'upload2.php',
    type: 'POST',
    data: formData,
    dataType: 'json' ,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
       $('#sep_s').html(data.msg); 
    }
  });
});

您使用SelectedFile作为formdata中的参数，但在php中使用file，例如

$ImageName = $_FILES['SelectedFile']['name'];

此外，您还需要在更改事件处理程序中获取要上传的文件，也就是说，当文件被实际选中时。

$('#fileInputBox').on('change', function (e) {
  var _submit = document.getElementById('fileInputBox');
  var formData = new FormData();
  formData.append('upload', 'upload'); 
  formData.append('SelectedFile', _submit.files[0]);
  ...