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