跟踪上传进度PHP和JavaScript

12-08-11 来源：[db:作者]

收藏我要投稿

多年来一直困扰着Web开发人员的一个问题是如何添加到他们的应用程序，如文件上传进度条，实时信息。用户是急躁;他们不想坐等，而浏览器是做一些，不知是否已被冻结或如果他们有一个缓慢的连接。提供了一个进度指示器，为用户提供有用的信息，并让他们知道到底发生了什么。
首先想到的，你可能会想办成这可以很容易地通过首次获得从用户的计算机上文件的大小，然后执行目录所在的文件正在上传的服务器上对一些简单的计算。关于第二个想法，你会发现事情并非那么简单。
JavaScript可以访问文件的名称，类型，甚至本地图像的宽度和高度，但它直到HTML5的，它可以访问文件的大小。不幸的是，HTML5仍然不是一个完整的标准，并均匀分布在所有的浏览器不支持。一个替代的解决方案是依靠一个Flash，Java或ActiveX插件，没有感谢，我会通过。然而，另一种解决办法是安装可选PHP缓存扩展，但可能不取决于您的托管环境，它似乎像这样一个小任务，如矫枉过正。
这似乎仿佛所有的选项是与滋扰充满，任务已迅速成为一个头痛。但在尤达的话，“不......是另一个。”
我爱PHP的许多原因之一是，它使看似困难的任务变得容易。5.4 PHP的，他们所做的又一个新的配置指令集，session.upload_progress。
在这篇文章中，我会告诉你如何这个功能可以被用来创建一个简单的上传进度条没有任何外部库或浏览器的依赖。我将首先讨论它是如何工作的，然后我走过你创建的四个文件，需要完成的任务（上传的形式，一些JavaScript，一点点CSS，返回上传的地位和文件）。
会话上传进度
除了一般的要求，允许上传文件，有两个跟踪进度。必须启用session.upload_progress.enabled指令和你所指定的名称的网页表单中必须有一个隐藏的场session.upload_progress.name指令。当session.upload_progress.enabled是真实的（因为它默认是在PHP 5.4，大概超出）的$ _POST [ session.upload_progress.name期间发送上传，文件传输的信息是在$ _SESSION的超全局阵列。
的print_r（）的输出了$ _SESSION数组将类似于下列文件传输过程中：

Array
(
    [upload_progress_myForm] => Array
        (
            [start_time] => 1323733740
            [content_length] => 721127769
            [bytes_processed] => 263178326
            [done] =>
            [files] => Array
                (
                    [0] => Array
                        (
                            [field_name] => userfile
                            [name] => ubuntu-10.04.3-desktop-i386.iso
                            [tmp_name] =>
                            [error] => 0
                            [done] =>
                            [start_time] => 1323733740
                            [bytes_processed] => 263178026
                        )
                )
        )
)

当您正在开发本地或快速网络上传小文件，你不会是能够直观地观察到的进展，因为转让发生如此之快。在这种情况下，你可能想尝试传送一个大文件。确保在你的php.ini的设置文件允许上传大，具体的post_max_size 的upload_max_filesize指令，然后确认他们是理智的价值，当你去生产。

创建表单

我会提出的第一个文件上传表单。只是为了保持尽可能简单的事情，例如将张贴到自己，一次只能处理一个文件上传。此外，我不会打扰保存文件后，它已上载。
下面是代码form.php：
01
<?php
02
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
03
    // move_uploaded_file()
04
}
05
?>
06
<html>
07
<head>
08
<title>File Upload Progress Bar</title>
09
<link rel="stylesheet" type="text/css" href="style.css">
10
</head>
11
<body>
12
<div id="bar_blank">
13
   <div id="bar_color"></div>
14
</div>
15
<div id="status"></div>
16
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="POST"
17
   id="myForm" enctype="multipart/form-data" target="hidden_iframe">
18
   <input type="hidden" value="myForm"
19
    name="<?php echo ini_get("session.upload_progress.name"); ?>">
20
   <input type="file" name="userfile"><br>
21
   <input type="submit" value="Start Upload">
22
</form>
23
<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
24
<script type="text/javascript" src="script.js"></script>
25
</body>
26
</html>

在这个例子中的代码实际上处理的文件已被省略，让事情变得简单。如果你有兴趣在这样的代码看起来应该像什么，检查出的文章用PHP文件上传蒂莫西Boronczyk。
提供网页的标题，包括样式表后的头一节，你会发现一个div元素的小集合。与身份证“bar_blank”格进度栏的容器。与身份证“bar_color”格将动态更新的文件上传进度。“身份”的div将显示上传％的数值。
设置的形式提交到一个隐藏的iframe元素相同的URL，并将其目标属性点。提交表单到一个隐藏的框架，让你保持在同一页上，而在后台完成的工作正在访问者。事实上，这是一种常见的做法时，做“的Ajax文件上传”，因为它直接使用JavaScript的XMLHttpRequest的对象发送一个文件的内容是不可能的。
在形式，特殊的隐藏字段需要填充的数组$ _SESSION中出现，其次是一个文件上传输入和提交按钮。提交表单将触发一个JavaScript函数名为startUpload（）将定义所包含的JavaScript文件。
在页面底部的隐藏帧的形式将发布和进口script.js的文件。
添加一些样式

style.css文件，下一个文件，是非常直截了当的。我定义的进度条容器的大小，并给它一个1px的黑边，作为它的加载进度条的颜色，和隐藏的iframe和进度条。
01
#bar_blank {
02
border: solid 1px #000;
03
height: 20px;
04
width: 300px;
05
}
06
07
#bar_color {
08
background-color: #006666;
09
height: 20px;
10
width: 0px;
11
}
12
13
#bar_blank, #hidden_iframe {
14
display: none;
15
}

客户端功能

script.js的文件是最大的一组文件。它包含六大功能，我将在下面讨论。很多人喜欢使用jQuery提供的一些功能，如果你愿意，你肯定是自由地这样做，但我个人更喜欢老派的做法。类似日本的地方如何对手工制作的货物价值较高的，我只是觉得更加热爱代码，如果是我自己。
01
function toggleBarVisibility() {
02
    var e = document.getElementById("bar_blank");
03
    e.style.display = (e.style.display == "block") ? "none" : "block";
04
}
05
06
function createRequestObject() {
07
    var http;
08
    if (navigator.appName == "Microsoft Internet Explorer") {
09
        http = new ActiveXObject("Microsoft.XMLHTTP");
10
    }
11
    else {
12
        http = new XMLHttpRequest();
13
    }
14
    return http;
15
}
16
17
function sendRequest() {
18
    var http = createRequestObject();
19
    http.open("GET", "progress.php");
20
    http.onreadystatechange = function () { handleResponse(http); };
21
    http.send(null);
22
}
23
24
function handleResponse(http) {
25
    var response;
26
    if (http.readyState == 4) {
27
        response = http.responseText;
28
        document.getElementById("bar_color").style.width = response + "%";
29
        document.getElementById("status").innerHTML = response + "%";
30
31
        if (response < 100) {
32
            setTimeout("sendRequest()", 1000);
33
        }
34
        else {
35
            toggleBarVisibility();
36
            document.getElementById("status").innerHTML = "Done.";
37
        }
38
    }
39
}
40
41
function startUpload() {
42
    toggleBarVisibility();
43
    setTimeout("sendRequest()", 1000);
44
}
45
46
(function () {
47
    document.getElementById("myForm").onsubmit = startUpload;
48
})();
toggleBarVisibility（）函数设置一个合适的风格上的“bar_blank”格，以显示或隐藏进度条。最初，它开出隐藏的，但一旦上载开始将显示上传完成时再次隐藏。
createRequestObject（）函数创建的XMLHttpRequest或ActiveXObject的基于用户的浏览器上的对象。这可能是大多数人都期待jQuery或其他一些JavaScript框架提供的功能。
sendRequest将（）函数请求的progress.php GET请求的文件，然后调用handleResponse（）函数来处理返回的数据。
handleResponse（）函数处理从响应progress.php这将是一个1-100之间的数字上的文件上传进度而定。我也用适当的值更新“状态”DIV。如果低于100的电流％，然后我调用JavaScript的原生的setTimeout（）函数将另一个更新请求后1的第二个可以调整这个值适当，否则我隐藏进度条再次和状态设置为“完成”。
上传栏可见的startUpload（）函数使发送1秒的延迟后，更新的要求。这个小小的延迟需要，为了给上传时间开始。
最后一个功能是一个可自执行的匿名函数注册startUpload（）表单的提交事件。

实时进度

带来的一切融合在一起的最后一个文件是progress.php文件：
01
<?php
02
session_start();
03
04
$key = ini_get("session.upload_progress.prefix") . "myForm";
05
if (!empty($_SESSION[$key])) {
06
    $current = $_SESSION[$key]["bytes_processed"];
07
    $total = $_SESSION[$key]["content_length"];
08
    echo $current < $total ? ceil($current / $total * 100) : 100;
09
}
10
else {
11
    echo 100;
12
}

脚本执行一些简单的数学上传输的字节数除以总的文件大小，乘以100，四舍五入给个百分点。
关于转让的信息键入一个的session.upload_progress.prefix指令的值串联的的隐藏session.upload_progress.name领域的价值。因为我的形式通过了“myForm的”，会议的关键是确定ini_get（“session.upload_progress.prefix”）。“myForm的”。
这里是一个行动的进度栏的截图：

上传进度条
微调的行为
PHP提供了一些额外的指令，以帮助微调会议上传的行为，你应该知道的。例如，session.upload_progress.cleanup，这是默认设置为1，清理完成后立即上传数据的额外会议。你必须要小心，以避免潜在的竞争条件。
再看一看，在代码progress.php，你会发现，我检查看如果$ _SESSION中[$键]是空的或不继续之前。我的JavaScript功能触发，从返回的结果，每只要第二progress.php小于100。如果session.upload_progress.cleanup启用和我的脚本获取上传的99％和1 1/2-second后上传完成了$ _SESSION [$键]将不存在下一个检查。如果我没有考虑到，然后我的JavaScript函数可能保持射击，即使上传完成后。
另外两个指令是session.upload_progress.freq，和session.upload_progress.min_freq双方确定如何往往会议应更新。可以在任一字节（即100），或总字节数的百分比（即2％）的频率值。价值min_freq在几秒钟内，并表示更新之间的最小秒数。显然，如果min_freq更新每隔1秒，这将是毫无意义的检查，每100毫秒您的JavaScript。
总结www.2cto.com
你现在应该有一个牢固掌握如何创建一个使用会议上传进度功能的文件上传进度条。向前走，我鼓励你们实验上传多个文件，选择取消使用进度上传$ _SESSION [$键可以鼓起你的头脑[“cancel_upload”，]，或任何其他的想法。请在您的经验和改进的意见。

作者：newcnzz

点击复制链接与好友分享!回本站首页