跟踪上传进度PHP和JavaScript

多年来一直困扰着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_co

补充：Web开发 , php ,