Grails JQuery UI進度條

我想在Grails應用程序中使用jQuery UI進度條進行文件上傳。我使用g：uploadForm來提交文件，我不知道如何獲取XMLHttpRequest對象以獲取傳輸字節流的進度，以便將參數提供給jQuery UI進度條自行更新。這是我到目前爲止的嘗試，但沒有運氣。我非常感謝任何指導。Grails JQuery UI進度條

$("#progressbar").progressbar({ 
      value: false, 
      change: function() { 
       $(".progress-label").text($("#uploadErrors").progressbar("value") + "%"); 
      }, 
      complete: function() { 
       $(".progress-label").text("Complete!"); 
      } 
     }); 
     $(".uploaderForm").submit(); 
     //var fileSize = $("#chseFile")[0].files[0].size; 

     var request = new XMLHttpRequest(); 

     request.upload.addEventListener('progress', function(event) { 
      var percent = event.loaded/event.total; 
      console.log(percent); 
      $("#progressbar").progressbar("value", percent * 100); 
     });

控制器的上傳方法很簡單，因爲它只是將工作推上一個服務：

def upload() { 

    params.selectedBatch = selectedBatch 

    // Diag 
    println "*** Request info: " + request 
    println "*** Session info: " + request.getSession() 
    println "*** Servlet context: " + request.getSession().getServletContext() 

    def f = request.getFile('file') 

    if (f.empty) { 
     println "File cannot be empty!" 
    } 

    else { 
      // The case that we have an Excel file upload. This if statement might need to be 
      // a switch statement in the future when we start accepting other upload formats like 
      // CSV and/or XML. 
      if (params.fileTypegrp.toInteger() == 1) { 

       // We know its an Excel file, now we use a switch for the data type.  
       switch (params.dataTypegrp.toInteger()) { 
        case 1: 
         fileImportService.excelAccountFileUpload(params) 
         println "upload complete!" 
         break 
. 
. 
.

來源

2014-06-14 Anonymous Human

我知道這是不是真的回答你的問題，但你使用的文件上傳插件，比如[uploadr]的一個考慮（http://grails.org /插件/ uploadr）？ – rcgeorge23

我沒有看過。我看到了一些插件，但他們看起來有點老，所以我不確定他們是否仍然適用，但我會研究這一點。謝謝。 –

你也可以在這裏粘貼你的控制器代碼嗎？我之前用GRAILS做過jQuery進度條，但沒有使用g：uploadForm。 –

UploadController.groovy

import grails.web.JSONBuilder 

def uploadFile = {   
    if (request instanceof MultipartHttpServletRequest) { 
     for (filename in request.fileNames) { 

      def uploadedMessage = StringUtils.EMPTY 

      MultipartFile file = request.getFile(filename) 

      JSONBuilder jSON = new JSONBuilder() 
      JSON json = jSON.build { 
       name = file.originalFilename 
       size = file.size      
      } 

      results = json.toString() 
     } 
    } 

    render results 
}

Upload.gsp

<input id="fileupload" type="file" name="files[]" multiple> 

<div id="progress" class="progress"> 
      <div class="progress-bar"></div> 
</div> 

<script> 
     jQuery('#fileupload').fileupload({ 
      url: 'uploadFile', 
      dataType: 'json', 
      progressall: function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      jQuery('#progress .progress-bar').css(
        'width', 
        progress + '%' 
      );     
     } 
     }); 

</script>

我沒有三編輯完整的代碼，但這應該工作，如果你有任何錯誤，然後請添加評論。我假設你已經添加了所有必需的JS和CSS。

FYI：我使用：http://blueimp.github.io/jQuery-File-Upload/

來源

2014-06-16 12:23:11

我試圖實現這個解決方案，但我無法弄清楚如何獲得Javascript的權利。經過一週的鬥爭，我放棄了進步吧。 –

@AnonymousHuman我明白，當談到進度條時，要把所有的東西都弄好是很困難的。我在實施時遇到了很多困難。不過，我會看看是否可以在本週末通過示例grails項目爲其撰寫博客文章。 –

Grails JQuery UI進度條

回答

相關問題