加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
upload.html 2.57 KB
一键复制 编辑 原始数据 按行查看 历史
Ikaros 提交于 2021-01-14 17:04 . 新增上传进度
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>upload</title>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script>
//文件上传ajax部分
function uploadFile()
{
var fd = new FormData();
fd.append("file", document.getElementById('file').files[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", "cgi-bin/upload.cgi"); //修改成自己的接口
xhr.send(fd);
}
function uploadProgress(evt)
{
if (evt.lengthComputable)
{
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$("#progressNumberDiv").width(percentComplete.toString() + '%');
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else
{
$("#progressNumberDiv").width('0%');
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt)
{
/* 服务器端返回响应时候触发event事件*/
alert(evt.target.responseText);
document.getElementById('file').outerHTML = document.getElementById('file').outerHTML;
}
function uploadFailed(evt)
{
alert("There was an error attempting to upload the file.");
document.getElementById('file').outerHTML = document.getElementById('file').outerHTML;
}
function uploadCanceled(evt)
{
alert("The upload has been canceled by the user or the browser dropped the connection.");
document.getElementById('file').outerHTML = document.getElementById('file').outerHTML;
}
</script>
</head>
<body>
<h2>目录权限,程序权限记得都给上</h2>
<form method="post" enctype="multipart/form-data">
<input type="file" name="file" class="file" id="file" />
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 0%;" id="progressNumberDiv">
<span class="sr-only" id="progressNumber">--</span>
</div>
</div>
<br>
<button type="button" class="btn btn-primary" onclick="uploadFile();">上传</button>
</form>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化