您的位置：首页 > 其它

文件上传

2015-09-24 16:04 351 查看

<!DOCTYPE html>

<html>

<head>

<title>Html5 Ajax 上传文件</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="javascript/jquery-1.8.0.min.js"></script>
<style type="text/css">
.processcontainer{
width:450px;
border:1px solid #6C9C2C;
height:25px;
background:white;
margin-top:80px;
}
#processbar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:100%;
}
.topdiv {
display: block;
position: absolute;
top: 100px;
left: 100px;
width: 460px;
height: 200px;
line-height:200px;
text-align:center;
padding: 20px;
border:1px solid black;
background-color: #3C90CC;
z-index:1002;
overflow: hidden;
}
</style>
<script type="text/javascript">
var i=0;

function UpladFile() {

var fileObj = document.getElementById("file").files[0]; // 获取文件对象

var file_path = "upload_file\\save";                    // 接收上传文件的后台地址

// FormData 对象

var form = new FormData();

form.append("author", "hooyes");                        // 可以增加表单数据

form.append("file", fileObj);                           // 文件对象

// XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

xhr.open("post", "upLoadDemoServlet?path="+file_path, true);

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

xhr.onload = function () {

alert("上传完成!");

};

xhr.send(form);

}

function progressFunction(evt) {

var processbar = document.getElementById("processbar");

if (evt.lengthComputable) {

processbar.style.width =  Math.round(evt.loaded / evt.total * 100) + "%";
processbar.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

}

}

function showOrHide(flag) {
if(flag == 1) {
$("#top").css('display','block');
}
/* if(flag == 2) {
$("#top").css('display','none');
$("#below").css('display','none');
i=0;
} */
}
</script>

</head>

<body>
<div d="top" class="topdiv">
<div class="processcontainer">
<div id="processbar" style="width:0%;"></div>
</div>
</div>
<br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="showOrHide(1);UpladFile()" value="上传" />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航