進捗バーと複合フォームの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); 

のように画像を処理しています。しかし、私はまた、データベースにいくつかのクエリの挿入データを持っているので、それだけでファイルのアップロードフォームではありません。

私が言ったように、すべてが機能していますが、進捗バーはありません。 これは

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関数を挿入しようとしましたが、幸運にしてきた、私のAJAXを提出しています。誰かが私を助けることができればそれは素晴らしいことですが、ファイルだけでなくPHPの処理も覚えておいてください。

Answer 1

ajax呼び出しの中でprogressbar関数をコール/クローズします。

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