PHP_APC+Ajax实现的监视进度条的文件上传

// load.js:

ADS.addEvent(window, 'load', function (event) { var fileList = ADS.$('fileList'); // 按照需要修改uoloadForm

    addProgressBar('uploadForm', function (response) { var files = response.filesProcessed; for (var i in files) { // 跳过空文件

            if (files[i] === null) { continue; } // 创建一个新的文件列表元素

            var li = document.createElement('li'); var a = document.createElement('a'); a.setAttribute('href', 'uploads/' + files[i]); a.appendChild(document.createTextNode(files[i])); li.appendChild(a); fileList.appendChild(li); } // 更新文件计数器

        var countContainer = ADS.$('fileCount'); ADS.removeChildren(countContainer); var numFiles = fileList.getElementsByTagName('li').length; countContainer.appendChild(document.createTextNode(numFiles)); }); }); // uploader.js: /** * User: lindongpeng * Date: 13-2-19 */



function verifyFileType(fileInput) { if (!fileInput.value || !fileInput.accept) { return true; } var extension = fileInput.value.split('.').pop().toLowerCase(), mimetypes = fileInput.accept.toLowerCase().split(','), type; for (var i = 0, len = mimetypes.length; i < len; i++) { type = mimetypes[i].split('/')[1]; if (type === extension || (type === 'jpeg' && extension === 'jpg')) { return true; } } return false; } var addProgressBar = function (form, modificationHander) { // 检查表单是否存在

    if (!(form = ADS.$(form))) { return false; } // 查找所有文件输入元素

    var allInputs = form.getElementsByTagName('input'); var input; var fileInputs = []; for (var i = 0; (input = allInputs[i]); i++) { if (input.getAttribute('type') === 'file') { fileInputs.push(input); } } // 如果没有文件输入元素则停止脚本

    if (!fileInputs.length) { return false; } // 添加change事件以基于MIME类型验证扩展名

    for (var j = 0, len = fileInputs[i]; i < len; j++) { // 使用change事件侦听器进行文件类型检查

        ADS.addEvent(fileInputs[i], 'change', function (event) { var ok = verifyFileType(this); if (!ok) { if (!ADS.hasClassName(this, 'error')) { ADS.addClassName(this, 'error'); } alert('Sorru, that file type is not allowed.Please select one of:' + this.accept.toLowerCase()); } else { ADS.removeClassName(this, 'error'); } }); } // 为上传而附加iframe元素

    // 在IE中，不能像下面这样通过DOM设置name属性，例如：

    // var uploadTargetFrame = document.createElement('iframe');

    // uploadTargetFrame.setAttribute('id', 'uploadTargetFrame');

    // uploadTargetFrame.setAttribute('name', 'uploadTargetFrame');

    // 为解决这个问题，需要创建一个div并使用其innerHTML属性

    // 从而确保在IE和其他浏览器中都能正确的设置name属性

    var uploadTargetFrame = document.createElement('div'); uploadTargetFrame.innerHTML = '<iframe name="uploadTargetFrame" id="uploadTargetFrame"></iframe>'; ADS.setStyleById(uploadTargetFrame, { 'width': 0, 'height': 0, 'border': 0, 'visibility': 'hidden', 'z-index': -1 }); document.body.appendChild(uploadTargetFrame); // 将表单的target属性修改为新iframe元素

    // 这样可以避免页面重载

    form.setAttribute('target', 'uploadTargetFrame'); // 创建一个唯一的ID以跟踪上传进度

    var uniqueID = 'A' + Math.floor(Math.random() * 1000000000000000); // 为APC_UPLOAD_PROGRESS键添加这个唯一ID

    // 这个字段必须添加到文件输入字段之前，以便

    // 服务器首先取得改键并触发存储进度信息的操作

    var uniqueIDField = document.createElement('input'); uniqueIDField.setAttribute('type', 'hidden'); uniqueIDField.setAttribute('value', uniqueID); uniqueIDField.setAttribute('name', 'APC_UPLOAD_PROGRESS'); form.insertBefore(uniqueIDField, form.firstChild); // 创建进度条的不同部分



    // 进度条

    var progressBar = document.createElement('div'); progressBar.className = 'progressBar'; // 内部的背景容器

    var progressBackground = document.createElement('div'); progressBackground.className = 'progressBackground'; ADS.setStyle(progressBackground, { 'height': '10px' }); progressBackground.appendChild(progressBar); // 检查已有的定位点

    // 必须是带有progressContainer类的span元素

    var progressContainer = ADS.getElementsByClassName( 'progressContainer', 'div' )[0]; // 如果该定位点不存在则创建一个并将其添加到表单中

    if (!progressContainer) { progressContainer = document.createElement('div'); progressContainer.className = 'progressContainer'; form.appendChild(progressContainer); } // 添加进度条的其余部分

 progressContainer.appendChild(progressBackground); // 同时也添加一个进度信息显示区域

    var progressMessage = document.createElement('div'); progressMessage.className = 'progressMessage'; progressContainer.appendChild(progressMessage); // 创建一个将由后面的进度监视方法使用

    // 的私有方法，以方便更新进度条和相应信息

    function updateProgressBar(percent, message, satus) { progressMessage.innerHTML = message; ADS.removeClassName(progressMessage, 'error complete waiting uploading'); ADS.addClassName(progressMessage, satus); // CSS样式和className将负责指示状态

 ADS.setStyle(progressBar, { 'width': percent }); } // 从0%和waiting开始初始化进度条

    updateProgressBar('0%', 'Waiting for upload', 'waiting'); // 为表单添加提交事件侦听器，用于

    // 验证表单信息和更新进度条

    ADS.addEvent(form, 'submit', function (event) { // 再次检查输入以确保

        // 其包含正确的扩展名

        var ok = true; var hasFiles = false; for (var i = 0, fileInput; (fileInput = fileInputs[i]); i++) { if (fileInput.value) { hasFiles = true; } if (!verifyFileType(fileInput)) { // 突出显示出错的文件输入元素

                if (!ADS.hasClassName(fileInput, 'error')) { ADS.addClassName(fileInput, 'error'); } ok = false; } } if (!ok || !hasFiles) { // 如果检查为通过则提示用户解决问题

 ADS.preventDefault(event); alert('Please select some valid files'); return false; } // 通过发出警告信息来禁用表单元素

        function warning(event) { ADS.preventDefault(event); alert('There is an upload in progress. Please wait.'); } for (var i = 0, input; (input = allInputs[i]); i++) { // input.setAttribute('disabled', 'disabled');

            ADS.addEvent(input, 'mousedown', warning); } // 创建一个函数以便在上传完成后重启表单

        // 该函数将在ajax事件侦听器内部被调用

        function clearWarnings() { // 从表单元素移除警告侦听器

            for (var i = 0, input; (input = allInputs[i]); i++) { ADS.removeEvent(input, 'mousedown', warning); } // 以新ID数值更新原ID和表单

            // 以确保下次上传不影响本次上传

            uniqueID = Math.floor(Math.random() * 100000000000000); uniqueIDFiled.setAttribute('value', uniqueID); } // 更新进度条

        updateProgressBar('0%', 'Waiting for upload', 'waiting'); // 为模拟脚本设置计数器

        var counter = 0; // 创建一个新方法以触发一次新的进度请求

        var progressWatcher = function () { // 使用唯一键来请求进度信息

            ADS.ajaxRequest(form.action + (form.action.indexOf('?') === -1 ? '?' : '&') + 'key=' + uniqueID + '&sim=' + (++counter), { // 服务器端脚本将返回适当的头部信息

                // 因此我们可以使用JSON侦听器

                jsonResponseListener: function (response) { // 检测响应以确认服务器端

                    // 脚本中是否存在错误



                    if (!response) { // 没有有效的响应

 updateProgressBar( '0%', 'Invalid response from progress watcher', 'error' ); // 请求完成故清除警告提示

 clearWarnings(); } else if (response.error) { // 服务器端报告了错误

                        updateProgressBar('0%', response.error, 'error'); // 请求完成故清除警告提示

 clearWarnings(); } else if (response.done === 1) { // POST请求已经完成

                        updateProgressBar('100%', 'Upload complete', 'complete'); // 请求完成故清除警告提示

 clearWarnings(); // 为提供更改处理程序的

                        // 用户传递新信息

                        if (modificationHander.constructor === Function) { modificationHander(response); } } else { // 更新进度条并返回结果

                        // 由于结果是null， 所以

                        // 返回会简单地停止执行

                        // 方法中其余的代码

 updateProgressBar( Math.round(response.current / response.total * 100) + '&', response.current + 'of'

                                + response.total + '. Uploading file: '

                                + response.currentFileName, 'uploading' ); // 再次执行进度监视程序

                        setTimeout(progressWatcher, 1000); } }, errorListener: function () { // ajax请求发生了错误

                    // 因此需要让用户知道

                    updateProgressBar('0%', this.status, 'error'); // 并清除警告提示

 clearWarnings(); } }); }; // 开始监视

        setTimeout(progressWatcher, 1000); }); }; // 主页

index.php: <?php // 循环遍历uploads文件夹 // 以便取得已经上传的文件

$uploads = new DirectoryIterator('./uploads'); $files=array(); foreach($uploads as $file) { // 跳过，并。。。

    if(!$file->isDot() && $file->isFile()) { // 添加到数组，。稍后，该数组

        // 将在HTML中被连接起来

        $files[]=sprintf( '<li><a href="uploads/%s">%s</a> <em>%skb</em></li>', $file->getFilename(), $file->getFilename(), round($file->getSize()/1024)

 ); } } // 输出页面

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Image Uploader with Progress (php5-APC)</title>



    <!-- Inclue some CSS style sheet to make everything look a little nicer -->

    <link rel="stylesheet" href="http://www.cnblogs.com/../shared/source.css" />

    <link rel="stylesheet" href="http://www.cnblogs.com/chapter.css" />

    <link rel="stylesheet" href="style.css" />



    <!-- Your ADS library with the common JavaScript objects -->

    <script src="http://www.cnblogs.com/../ADS.js"></script>



    <!-- Progress bar script -->

    <script src="uploader.js"></script>



    <!-- load script -->

    <script src="load.js"></script>



</head>

<body>

<h1>Image Uploader with Progress (php5-APC)</h1>

<div id="content">

    <form action="actions/" enctype="multipart/form-data" method="post" id="uploadForm">



        <fieldset>

            <legend>Upload a new image</legend>

            <p>Only jpg/gif/png files less than 100kb allowed.</p>

            <div class="fileSelector">

                <label for="newFile1">File 1</label>

                <input type="file" id="newFile1" name="newFile1" accept="image/jpeg,image/gif,image/png"/>

            </div>

            <div class="fileSelector">

                <label for="newFile2">File 2</label>

                <input type="file" id="newFile2" name="newFile2" accept="image/jpeg,image/gif,image/png"/>

            </div>

            <div class="fileSelector">

                <label for="newFile3">File 3</label>

                <input type="file" id="newFile3" name="newFile3" accept="image/jpeg,image/gif,image/png"/>

            </div>

            <input id="submitUpload" name="submitUpload" type="submit" value="Upload Files" />

        </fieldset>



    </form>



    <div id="browserPane">

        <h2>

                <span id="fileCount">

                    <?php echo count($files); ?>

                </span>

            Existing Files in <em>uploads/</em>

        </h2>

        <ul id="fileList">

            <?php echo join($files,"\n\t\t\t\t"); ?>

        </ul>

    </div>

</div>



<div id="where-from"> From <a href="http://advanceddomscripting.com" title="AdvancED DOM Scripting">AdvancED DOM Scripting</a>

    | <a href="http://www.amazon.com/exec/obidos/ASIN/1590598563/jeffreysamb05-20" title="Buy it on Amazon">Paperback</a>

</div>

</body>



</html>





// 表单action指向的php文件

action/index.php: 

 <?php //check if the request is using the ADS.ajaxRequest() method.

if($_SERVER['HTTP_X_ADS_AJAX_REQUEST']) { // Return the progress information as a JSON string

    

    // Send some headers to prevent caching of the progress request

    header('Expires: Fri, 13 Dec 1901 20:45:54 GMT') ; header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT') ; header('Cache-Control: no-store, no-cache, must-revalidate') ; header('Cache-Control: post-check=0, pre-check=0', false) ; header('Pragma: no-cache') ; // This will be a JavaScript JSON response

    header('Content-Type:application/json; charset=utf-8' ) ; // Retrieve the status using the getStatus() function below 

    echo json_encode(getStatusAPC($_GET['key'])); die(); } // Process any files in the PHP $_FILES[] array and return to the // main script if everything went well. Otherwise we'll display a // error page.

 $allowedExtensions = array('jpg','jpeg','gif','png'); $errorMessage = null ; $storedFiles = array(); if(count($_FILES) > 0) { try { // Process each file

        foreach($_FILES as $key=>$info) { if($_FILES[$key]['name']) { // storeFile() throws exceptions

                $file = storeFile($key,'../uploads/',$allowedExtensions); } else { $file = null; } // Keep track of stored files incase you need to

            // remove them.

            $storedFiles[$key] = $file['basename']; } if($_POST['APC_UPLOAD_PROGRESS'] && function_exists('apc_store')) { // Store the file information so it can be 

            // retrieved in the progress watcher 

            apc_store('upload_finished_'.$_POST['APC_UPLOAD_PROGRESS'],$storedFiles); // Die. This message will display in the iframe 

            die('Upload complete.'); } // Everything was successful so redirect back 

        // to the main index page

        header('Location: ../'); die(); } catch (Exception $e) { // There was an error so remove any files that were uploaded

 foreach($storedFiles as $file) { if(is_file($file)) unlink('uploads/'.$file); } $storedFiles = array(); if($_POST['APC_UPLOAD_PROGRESS'] && function_exists('apc_store')) { // Store the error message so it can be 

            // retrieved in the progress watcher

 apc_store( 'upload_error_'.$_POST['APC_UPLOAD_PROGRESS'], $e->getMessage() ); // Die. This message will display in the iframe

            die('There was an error'); } else { // Get the error message

            $errorMessage = sprintf( '<p>%s failed: %s</p>', $key, $e->getMessage() ); // Display a simple error page with a 

            // link back to the main index file

 echo <<<XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Oops!</title>

</head>

<body>

    <h1>Error</h1>

    <p>The system reported an error with the file(s) you were trying to upload:</p>

 {$errorMessage} <p><a href="../">Return to the upload page</a></p>



<div id="where-from"> From <a href="http://advanceddomscripting.com" title="AdvancED DOM Scripting">AdvancED DOM Scripting</a> 

    | <a href="http://www.amazon.com/exec/obidos/ASIN/1590598563/jeffreysamb05-20" title="Buy it on Amazon">Paperback</a>

</div>

</body>



</html>

XHTML; } } } /** * Store a file uploaded through HTTP on the server * * This function will access the global $_FILES array to retrieve the * information: * * The original name of the file on the client machine. * $_FILES['userfile']['name'] * * The mime type of the file, if the browser provided this information. * An example would be 'image/gif'. This mime type is however not checked * on the PHP side and therefore don't take its value for granted. * $_FILES['userfile']['type'] * * The size, in bytes, of the uploaded file. * $_FILES['userfile']['size'] * * The temporary filename of the file in which the uploaded file was stored on the server. * $_FILES['userfile']['tmp_name'] * * The error code associated with this file upload. * This element was added in PHP 4.2.0 * $_FILES['userfile']['error'] * * @param string $key The key in $_FILES that represents the file you wish to * store. This is generally the name attribute from the form. * @param string $where The directory on the server where you wish to store * the file. This can be absolute or relative to the location of execution. * @param array $extensions An array of acceptable extensions. (white list) * @param int $maxBytes The maximum number of bytes * @return array */

function storeFile($key,$where,$extensions,$maxBytes=null) { try { // Check for the file

        if(!$_FILES[$key]) { throw new Exception('The specified key does not exist in the $_FILES array'); } // Check the uplod location 

        if(!$where) { throw new Exception('Upload location not specified. If the current directory is desired, use "."'); } elseif ($where[strlen($where)-1] != DIRECTORY_SEPARATOR) { $where .= DIRECTORY_SEPARATOR; } // Check for permissions

        if(!is_writeable($where)) { throw new Exception('This page can not access the specified upload directory.'); } // convert the extensions to an array

        // (if a single extension as a string was supplied)

        settype($extensions,'array'); //check for extensions

        if(count($extensions) == 0) { throw new Exception('No valid extensions were specified.'); } // Convert ini to bytes and store in maxBytes if required

        $maxBytes = ($maxBytes ? $maxBytes : preg_replace_callback( '/([0-9]+)([gmk])/i', 'toBytes', ini_get('upload_max_filesize') )); // check PHP upload errors 

        switch ($_FILES[$key]['error']) { case UPLOAD_ERR_OK: // everything was fine. Proceed

                break; case UPLOAD_ERR_INI_SIZE: throw new Exception('The uploaded file exceeds the upload_max_filesize directive ('.ini_get('upload_max_filesize').') in php.ini.'); break; case UPLOAD_ERR_FORM_SIZE: throw new Exception('The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form.'); break; case UPLOAD_ERR_PARTIAL: throw new Exception('The uploaded file was only partially uploaded.'); break; case UPLOAD_ERR_NO_FILE: throw new Exception('No file was uploaded.'); break; case UPLOAD_ERR_NO_TMP_DIR: throw new Exception('Missing a temporary folder.'); break; case UPLOAD_ERR_CANT_WRITE: throw new Exception('Failed to write file to disk'); break; default: throw new Exception('Unknown PHP File Error'); } // Check if the files size is greater than the 

        // file size in the arguments

        if($_FILES['userfile']['size'] > $maxBytes) { throw new Exception('The uploaded file exceeds the maximum size specified in the application.'); } // Sanitize the file name

        $cleanName = str_replace(' ','-',$_FILES[$key]['name']); $cleanName = preg_replace('/-+/','-',$cleanName); $cleanName = preg_replace('/[^a-z0-9_.\/-]/i','',$cleanName); $fileNameParts = pathinfo($cleanName); // Verify the sanitized name is good

        $fileNameParts['filename'] = str_replace('.','_',$fileNameParts['filename']); if(!$fileNameParts['filename']) { throw new Exception('The desired file name contains no valid characters.'); } // Verify the extension is valid

        $fileNameParts['extension'] = strtolower($fileNameParts['extension']); if(!in_array($fileNameParts['extension'], $extensions)) { throw new Exception('The file extension is not one of: '.join($extensions,', ')); } // Postfix the file with a counter to avoid duplicates

        $count = 0; $postfix = ''; while(file_exists($uploadLocation = $where.$fileNameParts['filename'].$postfix.'.'.$fileNameParts['extension'])) { $postfix = '-'.++$count; } // Move the upload into place

        if(!move_uploaded_file($_FILES[$key]['tmp_name'], $uploadLocation)) { throw new Exception('Failed to move uploaded tmp file.'); } } catch (Exception $e) { // Catch exceptions for garbage collection and error storage



        // Remove the temp file

        if($_FILES[$key] && is_uploaded_file($_FILES[$key]['tmp_name'])) { @unlink($_FILES[$key]['tmp_name']); } // Throw the exception again for developers to catch

        throw $e; } // Return the information about the new file using pathinfo

    $return = pathinfo($uploadLocation); $return['rawname'] = basename($_FILES[$key]['name']); return $return; } function toBytes($matches) { switch(strtolower($matches[2])) { case "k": return $matches[1] * 1024; break; case "m": return $matches[1] * 1048576; break; case "g": return $matches[1] * 1073741824; break; } } /** * PHP 5.2 has a new set of hooks for checking the progress of a file upload * with APC 3.5 * * http://viewcvs.php.net/viewvc.cgi/pecl/apc/INSTALL?revision=3.53&view=markup * * apc.rfc1867 * RFC1867 File Upload Progress hook handler is only available * if you compiled APC against PHP 5.2.0 or later. When enabled * any file uploads which includes a field called * APC_UPLOAD_PROGRESS before the file field in an upload form * will cause APC to automatically create an upload_ * user cache entry where is the value of the * APC_UPLOAD_PROGRESS form entry. * (Default: 0) * */

function getStatusAPC($key) { $response = false; // will return false if not found

    if($status = apc_fetch('upload_'.$_GET['key'])) { /* status { "total":2676099, "current":102685, "filename":"test_large.jpg", "name":"test_file", "done":0 } */ $response = array( 'total' => $status['total'], 'current' => $status['current'], 'currentFileName' => $status['filename'], 'currentFieldName' => $status['name'], 'filesProcessed' => null, 'error' => null, 'done' => $status['done'], 'debug'=>null ); if($message = apc_fetch('upload_error_'.$_GET['key'])) { $response['error'] = $message; $response['debug'] = 'There was an error'; } else if ($status['done']==1 && ($filesProcessed = apc_fetch('upload_finished_'.$_GET['key']))) { //wait until the last file processed matches the one in status

            $response['debug'] = 'Files were processed '; if(($last = array_pop(array_keys(((array)$filesProcessed)))) == $status['name']) { $response['filesProcessed'] = $filesProcessed; $response['debug'] .= ' - all'; } else { // Override the done state because the upload 

                // has finished but the server is still processing

                // the files

                $response['done']= 0; $response['debug'] .= " - \"$last\" != \"{$status['name']}\""; } } } return $response; } ?>