带有进度条和复杂表单的 AJAX 文件上传

Question

我正在构建一个具有完整管理功能的摄影师门户，但在为图像上传创建进度条时遇到了一些问题。 我知道如何为简单的文件上传创建进度条，但在这种情况下，表单和过程很复杂，我尝试的任何方法都不起作用。 文件已上传，但没有进度条。

在我的 PHP 文件中，我正在处理这样的图像

// imagine initiala
$pictOrig = ImageCreateFromJPEG($tmpName);
$photoX = ImagesX($pictOrig);
$photoY = ImagesY($pictOrig);

// imagini download
$fileFold = '../images/download/';
$pictWidth = $downloadWidth;
$pictHeight = $downloadHeight;
$pictFin = ImageCreateTrueColor($pictWidth, $pictHeight);
ImageCopyResampled($pictFin, $pictOrig, 0, 0, 0, 0, $pictWidth+1, $pictHeight+1, $photoX, $photoY);
ImageJPEG($pictFin,$fileFold.$newName);

// imagini preview
$fileFold = '../images/preview/';
$pictWidth = $previewWidth;
$pictHeight = $previewHeight;
$pictFin = ImageCreateTrueColor($pictWidth, $pictHeight);
ImageCopyResampled($pictFin, $pictOrig, 0, 0, 0, 0, $pictWidth+1, $pictHeight+1, $photoX, $photoY);
ImageJPEG($pictFin,$fileFold.$newName);

// imagini small
$fileFold = '../images/small/';
$pictWidth = $smallWidth;
$pictHeight = $smallHeight;
$pictFin = ImageCreateTrueColor($pictWidth, $pictHeight);
ImageCopyResampled($pictFin, $pictOrig, 0, 0, 0, 0, $pictWidth+1, $pictHeight+1, $photoX, $photoY);
ImageJPEG($pictFin,$fileFold.$newName);
ImageDestroy($pictFin);
ImageDestroy($pictOrig);

但是，我也有一些查询将数据插入数据库，所以它不仅仅是一个文件上传表单。

就像我说的，一切正常，但没有进度条。 这是我的 AJAX 提交，

e.preventDefault(e);
$.ajax({
    type: "POST",
    url: './ajax/process.php',
    data: new FormData(this),
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
        if(data.msg === 'OK-reload'){
            location.reload();
        }
    },
    error: function(data){
        alert(data);
    }
});

我尝试插入一些 xhr 函数，但很幸运。如果有人可以帮助我，那就太好了，但请记住 PHP 处理不仅仅是文件。

Answer 1

在您的 ajax 调用中调用/关闭进度条函数。

e.preventDefault(e);
$.ajax({
    type: "POST",
    url: './ajax/process.php',
    data: new FormData(this),
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false,
    startprogressbar(); // Display you progressbar container here
    success: function(data) {
    closeprogressbar(); // hide your progressbar container here
    if(data.msg === 'OK-reload'){

        location.reload();
    }
 },
   error: function(data){
      alert(data);
  }
});