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进度条

回答

相关问题