java web 上传文件 进度条_Java Web带进度上传文件

关闭

//选中文件或是文件发生改变时触发

function changes(){

document.getElementById("console").setAttribute("hidden","hidden");

document.getElementById("progressNumber").setAttribute("hidden","hidden");

document.getElementById("submits").setAttribute("disabled","disabled");

//获取文件对象

var file = document.getElementById("files").files[0];

//获取文件大小(MB)

var fsz = (Math.round(file.size*100/(1024*1024))/100).toString();

//获取文件全名.类型

var fileName = file.name;

//获取文件类型

var ftp = fileName.substr(fileName.lastIndexOf('.')+1,fileName.length);

/判断文件类型是否匹配

if(ftp=='js'){

//判断文件大小是否匹配

if(fsz<5){

document.getElementById("submits").removeAttribute("disabled");

if(file){

var fileSize = 0;

if(file.size>1024*1024){

fileSize=fsz+"MB";

}else{

fileSize=(Math.round(file.size*100)/100).toString()+"KB";

}

document.getElementById("console").removeAttribute("hidden");

document.getElementById("hr").innerHTML ="

---

";

document.getElementById("fileName").innerHTML="文件名称："+

fileName.substr(0,fileName.lastIndexOf('.'));

document.getElementById("fileSize").innerHTML="文件大小："+fileSize;

document.getELementById("fileType").innerHTML="文件类型："+ftp;

}

}else{

alert("文件大小超过5MB，请选择小于5MB的相关文件！");

}

}else{

alert("文件类型不匹配，请选择相匹配的文件类型！");

}

}

//上传

function subForm(){

//获取项目全部路径

var s = window.location.href;

//按自己的需求截取

var ul = s.substr(0,s.lastIndexOf('/'));

//根据实际情况写

var url = ul+"/upFils/1";

var fd = new FormData();

fd.append("fileName",document.getElementById("files").file[0]);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress",uploadProgress,false);

xhr.addEventListener("load",uploadComplete,false);

xhr.addEventListener("error",uploadFailed,false);

xhr.addEventListener("abort",uploadCanceled,false);

xhr.open("post",url);

xhr.send(fd);

}

//上传进度

function uploadProgress(evt){

if(evt.lengthComputable){

var percentComplete = Math.round(evt.loaded*100/evt.total);

document.getElementById("progressNumber").removeAttribute("hidden");

document.getElementById("progressNumber").innerHTML = percentComplete.toString()+"%";

}else{

document.getElementById("progressNumber").innerHTML = "无法计算";

}

}

//服务器端返回响应时触发event事件

function uploadComplete(evt){

var s = window.location.href;

var ur = s.substr(0,s.lastIndexOf('.'));

var message = evt.target.responseText;

var json = JSON.parse(message);

//根据实际情况判断及增加ajax请求

if(json.stuats==200){

$.ajax({

url:ur,

type:"post",

data:{path:json.path},

success:function(data){

var dt = eval(data);

if(dt.stuats==200){

document.getElementById("submits").setAttribute("disabled","disabled");

document.getElementById("close").innerHTML = "";

alert("文件上传成功！");

}else{

alert("文件上传失败！");

}

},

error:function(){

alert("上传过程出现未知错误！");

}

});

}else{

alert("文件未能正确保存到服务器！");

}

}

//文件上传失败触发

function uploadFailed(evt){

alert("试图上传文件时出错！");

}

//上传文件取消触发

function uploadCanceled(evt){

alert("文件上传中断！");

}

//关闭本页面

function closePage(){

window.close();

}