2016-04-30 12 views
2

アップロードボタンをクリックすると、ファイルがサーバーにアップロードされ、サーバーはエラーを確認し、エラーがあれば通知しますreq.end();の機能を持つユーザー問題は、それ以来、私はXMLHttpRequest()(それが提供するonprogress関数を使用する)に移動しましたが、私はまだそれらの成功とエラー関数をajaxから使用する必要があります。どういうわけかXMLHttpRequestでそれらを使用する方法はありますか?ありがとうございました!XMLHttpRequest:ajaxの成功関数とエラー関数を使用する必要があります

これは私がこれまで持っているコードです:

var xhrVideo = new XMLHttpRequest(); 
xhrVideo.open('POST', '/uploadVideo', true); 
xhrVideo.upload.onprogress = function(e) { 
    if (e.lengthComputable) { 
    $('.videoProgress').html(((e.loaded/e.total) * 100).toFixed(0)+'%'); 
    } 
}; 
var videoForm = new FormData($('.videoUploadForm')[0]); 
xhrVideo.send(videoForm); 

とAjaxコード:loaderrorイベントのため

var videoData = new FormData($('.videoUploadForm')[0]); 
$.ajax({ 
    url: '/uploadVideo', 
    type: 'POST', 
    data: videoData, 
    cache: false, 
    contentType: false, 
    processData: false, 
    mimeType:"multipart/form-data", 
    success: function(data){ 
    switch(data){ 
     case '1': 
     alert('Wrong Video File Extension'); 
     break; 
     case '2': 
     alert('Wrong Image File Type'); 
     break; 
    } 
    }, 
    error: function(data){ 
    alert('Something went wrong! Please reload this page') 
    } 
}); 

答えて

3

使用リスナーを。

成功イベントのリスナーを追加する例。

xhrVideo.addEventListener('load', function(e) { 

:リスナーが送信()関数も

の前に追加する必要があり、私はXMLHttpRequestのを()の使用方法についてarticle全体を読むことをお勧めします。 (ActiveXObjectをご利用いただけます:

1

は個人的に、私はあなたがAjaxでxhrを使用して、進捗状況や負荷のイベントだけでなく

XHR(デフォルトをキャッチすることができるようにjqueryのAJAXの代わりに純粋ジャバスクリプト..を使用したいですIE)、XMLHttpRequest )型:Function()XMLHttpRequest オブジェクトを作成するためのコールバック。使用可能な場合はActiveXObject(IE)に、デフォルトでは XMLHttpRequestになります。オーバーライドして、XMLHttpRequestまたは工場の拡張機能のために独自の実装 を提供します。あなたはこの

$.ajax({ 
     xhr: function(){ 
      var xhr = new window.XMLHttpRequest(); 
      //Upload progress 
      xhr.upload.addEventListener("progress", function(evt){ 
       if (evt.lengthComputable) { 
        var percentComplete = (evt.loaded/evt.total) * 100; 
         //Do something with upload progress 
         $('.videoProgress').html(Math.round(percentComplete)+"% uploaded"); 
        } 
       } 
      }, false); 
      xhr.upload.addEventListener("load", function(evt){ 
       evt.preventDefault(); 

      },false); 
      return xhr; 
     }, 
     // reset of your ajax code 
のようにそれを使用することができ、あなたのコード内の

関連する問題