HTML5中的javascript上传进度显示 [英] A javascript upload progress display in HTML5
问题描述
我对js和html编程非常陌生.我正在使用以下代码制作一个进度条，其中显示了文件上传进度.但这在tryit编辑器上不起作用
I am very new to js and html programming. I am using following code to make a progress-bar which displays file upload progress. But it is not working on tryit editor
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.progress-wrapper {
width:100%;
}
.progress-wrapper .progress {
background-color:green;
width:0%;
padding:5px 0px 5px 0px;
}
</style>
<script>
function postFile() {
var formdata = new FormData();
formdata.append('file1', $('#file1')[0].files[0]);
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function (e) {
var file1Size = $('#file1')[0].files[0].size;
if (e.loaded <= file1Size) {
var percent = Math.round(e.loaded / file1Size * 100);
$('#progress-bar-file1').width(percent + '%').html(percent + '%');
}
if(e.loaded == e.total){
$('#progress-bar-file1').width(100 + '%').html(100 + '%');
}
});
request.open('post', '/echo/html/');
request.timeout = 45000;
request.send(formdata);
}
</script>
</head>
<form id="form1">
<input id="file1" type="file" />
<div class="progress-wrapper">
<div id="progress-bar-file1" class="progress"></div>
</div>
<button type="button" onclick="postFile()">Upload File</button>
</form>
</html>
我也在本地系统上尝试过，它在这里也无法正常工作.我做错了什么?请告诉我如何改善代码.我想显示一个进度条，该进度条显示使用ajax调用的文件的上载百分比.
I have tried on my local system too,it is not working here too. What I am doing wrong? Please tell me how can I improve the code. I want to display a progress-bar which shows upload percentage of file using ajax calls.
推荐答案
您需要添加 JQuery JavaScript 之前，先在 head 中插入 .请在下面查看正确的版本.
You need to add reference of JQuery in your head before writing any JavaScript. Please see correct version below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.progress-wrapper {
width:100%;
}
.progress-wrapper .progress {
background-color:green;
width:0%;
padding:5px 0px 5px 0px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
function postFile() {
var formdata = new FormData();
formdata.append('file1', $('#file1')[0].files[0]);
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function (e) {
var file1Size = $('#file1')[0].files[0].size;
if (e.loaded <= file1Size) {
var percent = Math.round(e.loaded / file1Size * 100);
$('#progress-bar-file1').width(percent + '%').html(percent + '%');
}
if(e.loaded == e.total){
$('#progress-bar-file1').width(100 + '%').html(100 + '%');
}
});
request.open('post', '/echo/html/');
request.timeout = 45000;
request.send(formdata);
}
</script>
</head>
<form id="form1">
<input id="file1" type="file" />
<div class="progress-wrapper">
<div id="progress-bar-file1" class="progress"></div>
</div>
<button type="button" onclick="postFile()">Upload File</button>
</form>
</html>
这篇关于HTML5中的javascript上传进度显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
