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：\在此安装\ upload2.php 的行 16 上的文件
注意：未定义的索引：文件 G：\在此安装\ 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

您使用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]);
  ...

通过ajax上传一个图像时出错

2 个答案: