jquery - Grails JQuery UI 进度条

Question

我正在尝试在 Grails 应用程序中使用 jQuery UI 进度条进行文件上传。我正在使用 g:uploadForm 提交文件，但我不确定如何获取 XMLHttpRequest 对象以获取传输字节流的进度，以便将参数提供给 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 );
        });

Controller 的上传方法非常简单，因为它只是将工作传递给服务:

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
.
.
.

Answer 1

上传 Controller .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
}

上传.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。

仅供引用:我正在使用:http://blueimp.github.io/jQuery-File-Upload/