Question

我是Spring Boot的初学者，我从事一个处理大文件的Web项目。
我想在POST请求上创建一个进度条，这向我显示了处理POST中/ ProcessingFile上的文件的进度条这是我的代码；

public static String postFile(String fileName, String userName, String password, String macAddress) throws Exception {

HttpClient client = new DefaultHttpClient();
HttpPost post = new HttpPost(SERVER + "uploadFile");
MultipartEntityBuilder builder = MultipartEntityBuilder.create();        
builder.setMode(HttpMultipartMode.BROWSER_COMPATIBLE);

final File file = new File(fileName);
FileBody fb = new FileBody(file);

builder.addPart("file", fb);  
builder.addTextBody("userName", userName);
builder.addTextBody("password", password);
builder.addTextBody("macAddress",  macAddress);
final HttpEntity yourEntity = builder.build();

class ProgressiveEntity implements HttpEntity {
    @Override
    public void consumeContent() throws IOException {
        yourEntity.consumeContent();                
    }
    @Override
    public InputStream getContent() throws IOException,
            IllegalStateException {
        return yourEntity.getContent();
    }
    @Override
    public Header getContentEncoding() {             
        return yourEntity.getContentEncoding();
    }
    @Override
    public long getContentLength() {
        return yourEntity.getContentLength();
    }
    @Override
    public Header getContentType() {
        return yourEntity.getContentType();
    }
    @Override
    public boolean isChunked() {             
        return yourEntity.isChunked();
    }
    @Override
    public boolean isRepeatable() {
        return yourEntity.isRepeatable();
    }
    @Override
    public boolean isStreaming() {             
        return yourEntity.isStreaming();
    } // CONSIDER put a _real_ delegator into here!

    @Override
    public void writeTo(OutputStream outstream) throws IOException {

        class ProxyOutputStream extends FilterOutputStream {
            /**
             * @author Stephen Colebourne
             */

            public ProxyOutputStream(OutputStream proxy) {
                super(proxy);    
            }
            public void write(int idx) throws IOException {
                out.write(idx);
            }
            public void write(byte[] bts) throws IOException {
                out.write(bts);
            }
            public void write(byte[] bts, int st, int end) throws IOException {
                out.write(bts, st, end);
            }
            public void flush() throws IOException {
                out.flush();
            }
            public void close() throws IOException {
                out.close();
            }
        } // CONSIDER import this class (and risk more Jar File Hell)

        class ProgressiveOutputStream extends ProxyOutputStream {
            int pr = 0 ; 
            public ProgressiveOutputStream(OutputStream proxy) {
                super(proxy);
            }
            public void write(byte[] bts, int st, int end) throws IOException {

                // FIXME  Put your progress bar stuff here!
                pr = pr + end ; 
                System.out.println("ProgressBar:" + (int) ( 100*( file.getSize() / pr ) ) ; 
                out.write(bts, st, end);
            }
        }

        yourEntity.writeTo(new ProgressiveOutputStream(outstream));
    }

};
ProgressiveEntity myEntity = new ProgressiveEntity();

post.setEntity(myEntity);
HttpResponse response = client.execute(post);        

return getContent(response);
}


  public static String getContent(HttpResponse response) throws IOException {
    BufferedReader rd = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));
    String body = "";
    String content = "";

    while ((body = rd.readLine()) != null) 
    {
        content += body + "\n";
    }
    return content.trim();
}

如何将ProgressBar（从write方法）值传递到我的html视图（胸腺）的问题？

Answer 1

使用XHR.onprogress;例如

 $(function() {
        $('button[type=submit]').click(function(e) {
            e.preventDefault();
            $(this).prop('disabled',true);
            var form = document.forms[0];
            var formData = new FormData(form);
            var ajaxReq = $.ajax({
                url : 'http://localhost:8080/rest',
                type : 'POST',
                data : formData,
                cache : false,
                contentType : false,
                processData : false,
                xhr: function(){
                    //Get XmlHttpRequest object
                     var xhr = $.ajaxSettings.xhr() ;

                    //Set onprogress event handler 
                     xhr.upload.onprogress = function(event){
                        console.log(event) ; 
                        var perc = Math.round((event.loaded / event.total) * 100);

                        $('#progressBar').text(perc + '%');
                        $('#progressBar').css('width',perc + '%');
                     };
                     return xhr ;
                },
                beforeSend: function( xhr ) {
                    //Reset alert message and progress bar
                    $('#alertMsg').text('');
                    $('#progressBar').text('');
                    $('#progressBar').css('width','0%');
                }
            });

            // Called on success of file upload
            ajaxReq.done(function(msg) {
                $('#alertMsg').text(msg);
                $('input[type=file]').val('');
                $('button[type=submit]').prop('disabled',false);
            });

            // Called on failure of file upload
            ajaxReq.fail(function(jqXHR) {
                $('#alertMsg').text(jqXHR.responseText+'('+jqXHR.status+
                        ' - '+jqXHR.statusText+')');
                $('button[type=submit]').prop('disabled',false);
            });
        });
    });

在SpringBoot上使用HttpClient / MultipartRequestEntity检查进度

1 个答案: