龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > php编程 >

PHP中使用Session配合Javascript实现文件上传进度条功能(3)

时间:2014-10-17 11:50来源:网络整理 作者:网络 点击:
分享到:
$('#progress .label').html(progress + '%'); $('#progress .bar').css('width', progress + '%'); if(progress 100){ setTimeout('fetch_progress()', 100); }else{ $('#progress .label').html('完成!'); } },

                $('#progress .label').html(progress + '%');
                $('#progress .bar').css('width', progress + '%');

                if(progress < 100){
                        setTimeout('fetch_progress()', 100);
                }else{
            $('#progress .label').html('完成!');
        }
        }, 'html');
}

$('#upload-form').submit(function(){
        $('#progress').show();
        setTimeout('fetch_progress()', 100);
});


当#upload-form被提交时,我们把进度条显示出来,然后反复调用 fetch_progress() 获得进度信息,并更新进度条,直到文件上传完毕,显示'完成!'。

Done!

完整代码下载:http://xiazai.jb51.net/201410/tools/samples-master.rar

注意事项

input标签的位置

name为session.upload_progress.name的input标签一定要放在文件input <input type="file" /> 的前面。

取消上传

通过设置 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开始的文件。已经上传成功的文件不会被删除。

setTimeout vs. setInterval

应该通过 setTimeout() 来调用 fetch_progress(),这样可以确保一次请求返回之后才开始下一次请求。如果使用 setInterval() 则不能保证这一点,有可能导致进度条出现'不进反退'。

精彩图集

赞助商链接