通过ajax上传一张图片时出错[关闭]

Question

我无法通过 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
等等。

这里有什么问题？

Answer 1

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

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

$('#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); 
    }

  });
});

Answer 2

你在formdata中使用SelectedFile作为参数，但在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]);
  ...