2016-01-20 136 views
0

我有一個函數uploadFunction,它通過使用JQuery ajax調用的Rest web服務將文件上載到我的服務器上。 我使用這種方法也用於另一個功能,我需要知道Web服務調用的結果,以創建一個或更少的一行與上載的文件的名稱。
實際的方法與變量不起作用,有沒有辦法知道文件是否正確上傳? 我嘗試使用async:false(因爲我反正等待上傳),但是我的等待模式出現,上傳結束,而不是立即。知道javascript中另一個函數調用ajax的結果

function uploadFunction(fileType){ 
//CSRF attribute for spring security 
var token = $("meta[name='_csrf']").attr("content"); 
var header = $("meta[name='_csrf_header']").attr("content"); 

var formData = new FormData(); 
var fileControl = document.getElementById(fileType); 
var length = fileControl.files.length; 
for(var i = 0; i< length; i++){ 
    formData.append('file[]',fileControl.files[i]); 
} 
formData.append('idFleet', selectedFleet); 
formData.append('idCar', $("#selectedCar").val()); 
if(fileType!='dat') 
    formData.append('initialKm', 0); 
else 
    formData.append('initialKm', $("#initialKm").val()); 
jQuery.ajax({ 
    url : 'upload', 
    type: 'POST', 
    contentType: false, 
    processData: false, 
    data:formData, 
    beforeSend:function(xhr) { 
     xhr.setRequestHeader(header, token); 
     waitingModal.showPleaseWait(); 
    }, 
    success: function(data,status,xhr){ 
     //No exception occurred 
     if (data.status){ 
      //Also the field are right(for e.g. form value) 
      if(data.success){ 
       //Store information if file is datatable 
       if (fileType=='datatable') 
        $("#datatablePath").val(data.result[0]); 
       notifyMessage(fileType + " has been uploaded!", 'success'); 
       uploadResult=true; 
      } 
      else{ 
       //code if there are some error into form for example 
      } 
     } else { 
      notifyMessage(data.result, 'error'); 
      $('#acquisitionWizard').bootstrapWizard('show',2);//show 
      uploadResult=false; 
     } 
    }, 
    error: function(xhr,status,e){ 
     window.location.href = "/ATS/500"; 
    } 
}).complete(function() { 
    //add timeout because otherwise user could see a too fast waiting modal 
    setTimeout(function(){ 
     waitingModal.hidePleaseWait(); 
    }, 1000); 
    }); 
} 

我的函數調用uploadFunction是這樣的:

$(function() { 
    $("#addDatButton").click(
      function() { 
       var fileControl = document.getElementById('dat'); 
       if (fileControl.files.length!=0 && $('#initialKm').val().length == 0){ 
        notifyMessage("You have to add initial Km!", 'info'); 
       }else if (fileControl.files.length==0 && $('#initialKm').val().length != 0){  
        notifyMessage("You have to add dat file!", 'info'); 
       }else if (fileControl.files.length==0 && $('#initialKm').val().length == 0){  
        notifyMessage("You have to add dat file and initial Km!", 'info'); 
       }else{ 
        uploadFunction('dat'); 
        if (uploadResult){ 
         datUpload=true; 
         var fileName=document.getElementById('datName').value; 
         var fileUploadHTML='<div class="row"> <div class="col-xs-4"><div class="form-group has-success"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-upload" style="color: green"></i></span> <input type="text" class="form-control" readonly="readonly" placeholder="'+fileName+'"></div></div></div><div>'; 
         $("#fileUploadSuccess").append(fileUploadHTML); 
         document.getElementById("initialKm").value = ''; 
         document.getElementById("dat").value = ''; 
         document.getElementById("datName").value = ''; 
        } 
       } 

      }); 
}); 

回答

3

使用的承諾。剛剛從uploadResult()返回阿賈克斯承諾(它的返回值),並添加一個.then.done調用中的後續代碼:

例如

function uploadFunction(fileType){ 
    [snip] 
    return jQuery.ajax({ 

,並使用這樣的:

uploadFunction('dat').then(function(uploadResult){ 
    if (uploadResult){ 
     [snip] 
    } 
}); 

切勿使用async: false。它阻止瀏覽器進行其他處理。始終使用異步操作。

+0

乾淨清晰! – sander

+0

更不用說'async:false'已被棄用,並且在不久的將來可能會崩潰,而且瀏覽器已經通過警告來控制不使用它 – charlietfl

+0

@charlietfl:我沒有注意到它已從1.8棄用。這是好消息:) –

相關問題