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);
  }
});

使用进度条和复杂表单

1 个答案: