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