会话使用JQuery上传进度 [英] Session Upload Progress with JQuery
本文介绍了会话使用JQuery上传进度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将这个例子
问题在于，无论何时点击上传按钮，它都会在<$ c $的持续时间内切换进度条c> setTimeout 函数（1秒），然后它消失，并显示完成，从来没有显示我的任何实际进展。
我正在使用PHP> 5.4。我有session.upload_progress.enabled =开。我上传了一个巨大的文件，我知道甚至需要几秒钟才能完成。
$ p><！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< style>
#progress_bar {
border：solid 1px＃000;
height：20px;
width：300px;
display：none;
}
#bar_color {
background-color：＃006666;
height：20px;
width：0px;
}
< / style>
< title>档案上载进度栏< / title>
< / head>
< body>
< div id =progress_bar>
< div id =bar_color>< / div>
< / div>
< div id =upload_status>< / div>
< form id =uploadFormenctype =multipart / form-data>
< input type =hiddenname =<？php echo ini_get（'session.upload_progress.name'）;？> value =uploadForm/>
< input type =hiddenname =MAX_FILE_SIZEvalue =9999999/>
< input type =filename =file/>< br />
< input type =submitvalue =开始上传/>
< / form>
< / body>
< / html>
JQuery：
<脚本>
$（document）.ready（function（）{
var interval;
//更新状态栏
$（＃uploadForm）。submit（function （E）{
e.preventDefault（）;
$（ '＃progress_bar'）切换（）;
间隔= setInterval的（函数（）{
$ .ajax（{
cache：false，
url：status.php，
类型：GET
}）
.done（function ）{
if（response）{
$（'＃bar_color'）。width（response +'％'）;
$（'＃upload_status'）。html（response +'％ '）;
if（response< 100）{
setInterval（interval，1000）;
} else {
$（'＃progress_bar'）。toggle （）;
$（'＃bar_color'）。width（0 +'px'）;
$（'＃upload_status'）。html（'完成。'）;
clearInterval（interval）;
}
}
}）;
}，1000）;
}）;
}）;
< / script>
PHP：
<？php
session_start（）;
$ key = ini_get（'session.upload_progress.prefix'）。 uploadForm;
if（！empty（$ _ SESSION [$ key]））{
$ current = $ _SESSION [$ key] ['bytes_processed'];
$ total = $ _SESSION [$ key] ['content_length'];
echo $ current< $总？ ceil（$ current / $ total * 100）：100;
} else {
echo 100;
$ / code> 我要去哪里？
您必须上传带有ajax的文件，并在上传时更新进度条，而不是在完成时更新。 http://jsfiddle.net/SwHf6/
<$ （）{
>
$（'input [type = file]'）。 '，$（'input [type = file]'）。get（0）.files [0]）;
$ .ajax（{
url：'。'，
类型： 'POST'，
过程数据：假，
数据：FD，
XHR：函数（）{
变种XHR = $ .ajaxSettings.xhr（）;
xhr.upload.addEventListener（ '进步'，功能（EV）{
$（ '巴 '）。CSS（' 宽度'，（ev.loaded /（ev.total/100））+ '％'）;
}，false）;
return xhr;
}，
beforeStart：function（）{
$（'。bar '）.css（'width'，'0％'）;
}，
成功：function（）{
alert（'done'）;
}
}）;
}）;
I'm attempting to convert this example which uses pure JavaScript to a JQuery equivalent.
The problem is that whenever I hit the upload button, it toggles the progress bar for the duration of the setTimeout function (1 second), then it disappears and displays "Done" having never shown me any actual progress.
I am using PHP > 5.4. I have session.upload_progress.enabled = On. I am uploading a huge file that I know should take several seconds to complete even locally.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<style>
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: none;
}
#bar_color {
background-color: #006666;
height: 20px;
width: 0px;
}
</style>
<title>File Upload Progress Bar</title>
</head>
<body>
<div id="progress_bar">
<div id="bar_color"></div>
</div>
<div id="upload_status"></div>
<form id="uploadForm" enctype="multipart/form-data">
<input type="hidden" name="<?php echo ini_get('session.upload_progress.name'); ?>" value="uploadForm" />
<input type="hidden" name="MAX_FILE_SIZE" value="9999999" />
<input type="file" name="file" /><br />
<input type="submit" value="Start Upload" />
</form>
</body>
</html>
JQuery:
<script>
$(document).ready(function () {
var interval;
// update status bar
$("#uploadForm").submit(function(e) {
e.preventDefault();
$('#progress_bar').toggle();
interval = setInterval(function() {
$.ajax({
cache: false,
url: "status.php",
type: "GET"
})
.done(function(response) {
if (response) {
$('#bar_color').width(response + '%');
$('#upload_status').html(response + '%');
if (response < 100) {
setInterval(interval, 1000);
} else {
$('#progress_bar').toggle();
$('#bar_color').width(0 + 'px');
$('#upload_status').html('Done.');
clearInterval(interval);
}
}
});
}, 1000);
});
});
</script>
PHP:
<?php
session_start();
$key = ini_get('session.upload_progress.prefix') . 'uploadForm';
if (!empty($_SESSION[$key])) {
$current = $_SESSION[$key]['bytes_processed'];
$total = $_SESSION[$key]['content_length'];
echo $current < $total ? ceil($current / $total * 100) : 100;
} else {
echo 100;
}
Where am I going wrong?
解决方案
You have to upload the file with ajax and update the progress bar while it's uploading, not when it's done. http://jsfiddle.net/SwHf6/
$('input[type=file]').change(function() {
var fd = new FormData();
fd.append('file', $('input[type=file]').get(0).files[0]);
$.ajax({
url: '.',
type: 'POST',
processData: false,
data: fd,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener('progress', function(ev) {
$('.bar').css('width', (ev.loaded/(ev.total/100))+'%');
}, false);
return xhr;
},
beforeStart: function() {
$('.bar').css('width', '0%');
},
success: function() {
alert('done');
}
});
});
这篇关于会话使用JQuery上传进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
