带进度条的文件上传

1 html

<div class="row">
<div class="form-group">
<label for="" class="col-lg-3 control-label">病毒库文件上传<span style="color:red">&nbsp;*</span></label>
<div class="col-lg-5">
<input id="file" type="file" name="file" style="display:none">
<input class="form-control" id="c_update_filename" name="c_update_filename" value="" type="text">
</div>
<div class="col-lg-4 tips">
<span class="txt-tips">请选择病毒库文件!</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="" class="col-lg-3 control-label">进度条</label>
<div class="col-lg-9">
<div class="progress progress-striped active" style="margin-bottom: 0px;">
<div id="progress" class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 0%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</div>
</div>
</div>

2 js

function UploadFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var url = projectPath+"/virus/uploadVirusDbFile"; // 接收上传文件的后台地址

param.c_update_size = fileObj.size; //添加文件大小

var form = new FormData(); // FormData 对象
form.append("file", fileObj); // 文件对象

xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
xhr.upload.onloadstart = uploadStart;
xhr.send(form); //开始上传，发送form数据
}

 

//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction(evt) {
var per = evt.loaded/evt.total;
$("#progress").css("width",per*100+"%");
}
//上传成功响应
function uploadComplete(evt) {
$(".notice").text("文件上传成功 !");
$.post(
projectPath+'/virus/upgradeOffline',
{
params:JSON.stringify(param)
},
function(data,status,xhr){
$("#upgrade_sure").removeAttr("disabled");
$("#updateVirusModal").modal("hide");
if(data == "success")
{
showResultInfo("升级成功!");
fileInfoTable();
}else{
showResultInfo(data);
}
}
);
}

function uploadStart(evt){
$("#progress").css("width","0%");
$("#upgrade_sure").attr("disabled",true);
}

//上传失败
function uploadFailed(evt) {
$(".notice").text("文件上传失败 !");
$("#upgrade_sure").removeAttr("disabled");
}

 

3 后端

@ResponseBody
@RequestMapping(value = "/uploadVirusDbFile")
public void uploadVirusDbFile(@RequestParam("file") CommonsMultipartFile file,HttpServletRequest request) throws IllegalStateException, IOException{
String leftPath = request.getServletContext().getRealPath("/WEB-INF/virusFile");
String path = leftPath+file.getOriginalFilename();
File newFile=new File(path);
if(!newFile.exists())
{
newFile.createNewFile();
}
file.transferTo(newFile);
}