<!DOCTYPE html>
<html>
<head>
<title>my title</title>
<meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1">
<script type="text/javascript">
function up() {
if (document.getElementById("f").value == "") {
document.getElementById("result").innerHTML = "请选择文件";
}
else {
var fileObj = document.getElementById("f").files[0];
//创建xhr
var xhr = new XMLHttpRequest();
var url = "uploadFile";
//FormData对象
var fd = new FormData();
fd.append("path", "D:\\"); //上传路径
fd.append("file", fileObj);
fd.append("acttime",new Date().toString()); //本人喜欢在参数中添加时间戳，防止缓存（--、）
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
document.getElementById("result").innerHTML = result;
}
}
//进度条部分
xhr.upload.onprogress = function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progress').value = percentComplete;
document.getElementById('progressNumber').style.width = percentComplete + "px";
}
};
xhr.open("POST", url, true);
xhr.send(fd);
}
}
</script>
</head>
<body>
<center>
<input type="file" id="f" />
<br />
<input type="button" value="up" onclick="up()" />
<br />
<!--进度条标签-->
<progress value="0" max="100" id="progress" style="height: 20px; width: 100%"></progress>
<br />
<!--div模拟进度条-->
<div id="progressNumber" style="width: 0px; height: 20px; background-color: red"></div>
<br />
<div id="result"></div>
</center>
</body>
</html>
<html>
<head>
<title>my title</title>
<meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1">
<script type="text/javascript">
function up() {
if (document.getElementById("f").value == "") {
document.getElementById("result").innerHTML = "请选择文件";
}
else {
var fileObj = document.getElementById("f").files[0];
//创建xhr
var xhr = new XMLHttpRequest();
var url = "uploadFile";
//FormData对象
var fd = new FormData();
fd.append("path", "D:\\"); //上传路径
fd.append("file", fileObj);
fd.append("acttime",new Date().toString()); //本人喜欢在参数中添加时间戳，防止缓存（--、）
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
document.getElementById("result").innerHTML = result;
}
}
//进度条部分
xhr.upload.onprogress = function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progress').value = percentComplete;
document.getElementById('progressNumber').style.width = percentComplete + "px";
}
};
xhr.open("POST", url, true);
xhr.send(fd);
}
}
</script>
</head>
<body>
<center>
<input type="file" id="f" />
<br />
<input type="button" value="up" onclick="up()" />
<br />
<!--进度条标签-->
<progress value="0" max="100" id="progress" style="height: 20px; width: 100%"></progress>
<br />
<!--div模拟进度条-->
<div id="progressNumber" style="width: 0px; height: 20px; background-color: red"></div>
<br />
<div id="result"></div>
</center>
</body>
</html>
评论
发表评论