Блог

Я пытаюсь использовать индикатор выполнения пользовательского интерфейса jQuery в приложении Grails для загрузки файла. Я использую 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 );
        });
  

Метод загрузки контроллера довольно прост, потому что он просто передает работу службе:

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

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
}
  

Загрузить.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 /