javaweb实现文件上传进度条功能

一、创建帮助类

package com.xxxx.xxxx.util;


public class Progress {

private long bytesRead;

    private long contentLength;
    
    private long items;


public long getBytesRead() {
return bytesRead;
}


public void setBytesRead(long bytesRead) {
this.bytesRead = bytesRead;
}


public long getContentLength() {
return contentLength;
}


public void setContentLength(long contentLength) {
this.contentLength = contentLength;
}


public long getItems() {
return items;
}


public void setItems(long items) {
this.items = items;
}


@Override
public String toString(){
return "Progress [bytesRead=" + bytesRead + ", contentLength=" + contentLength + ", items=" + items + "]";
}

}

二、创建监听类FileUploadProgressListener实现ProgressListener接口

package com.xxxx.xxxx.util;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.ProgressListener;
import org.springframework.stereotype.Component;
@Component
public class FileUploadProgressListener implements ProgressListener{

private HttpSession session;
        public void setSession(HttpSession session){
            this.session=session;
            Progress status = new Progress();//保存上传状态
            session.setAttribute("status", status);

        }

@Override
public void update(long bytesRead, long contentLength, int items){
Progress status = (Progress) session.getAttribute("status");
status.setBytesRead(bytesRead);
status.setContentLength(contentLength);
status.setItems(items);
}

}

三、在文件上传的ajax中监听文件上传

//上传数据包文件方法

function UpladFile() {
var excleFileTxtVal=$("#excleFileTxt").val();
var datafileuuid=excleFileTxtVal.substring(excleFileTxtVal.indexOf("/")+8,excleFileTxtVal.indexOf("."));
var fileObj = $("#dataFileBtn").get(0).files[0]; // js 获取文件对象
console.info("上传的文件:"+fileObj);
 // 接收上传文件的后台地址 
var FileController = "<%=host%>/xxxxx/xxxxxxx.do";
// FormData 对象
 var form = new FormData();
form.append("fileNewName", datafileuuid);
form.append("file", fileObj); // 文件对象
 // XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.onload = function() {
    var responseText = xhr.responseText;
    console.log(responseText)
    var myResult=JSON.parse(responseText).result;
    var myPath=JSON.parse(responseText).path;
    if(myResult=="ok"){
        $.msgbox.AlertRightCall("温馨提示","数据包上传成功!",function(){            

    $("#dataUploadFileBtn").attr('disabled', true);

            $("#batchAddBtn").attr('disabled', false);

            $("#progressBar").parent().removeClass("active");
            $("#progressBar").parent().hide();
            $("#dataFileTxt").val(myPath);
        })
     }else{
        $.msgbox.AlertTip("温馨提示","服务忙,数据包上传失败,请稍后再试!")
     }
    };
    xhr.send(form);
 }

function progressFunction(evt) {
    var progressBar = $("#progressBar");
    if (evt.lengthComputable) {
        var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";
        progressBar.width(completePercent);
        $("#uploadNum").html("上传完成 " + completePercent);
    }
 };
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页