<?php
/**
* @category PHP5.4 Progress Bar
* @author Pierre-Henry Soria <[email protected]>
* @copyright (c) 2012, Pierre-Henry Soria. All Rights Reserved.
* @license CC-BY License - http://creativecommons.org/licenses/by/3.0/
* @version 1.0.0
*/
/**
* Check the version of PHP
*/
if (version_compare(phpversion(), '5.4.0', '<'))
exit('ERROR: Your PHP version is ' . phpversion() . ' but this script requires PHP 5.4.0 or higher.');
/**
* Check if "session upload progress" is enabled
*/
if (!intval(ini_get('session.upload_progress.enabled')))
exit('session.upload_progress.enabled is not enabled, please activate it in your PHP config file to use this script.');
require_once 'Upload.class.php';
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>PHP 5.4 Session Upload Progress Bar Demo</title>
<meta name="description" content="PHP 5.4 Session Upload Progress Bar" />
<meta name="keywords" content="PHP, session, upload, progress bar" />
<meta name="author" content="Pierre-Henry Soria" />
<link rel="stylesheet" href="./static/css/common.css" />
</head>
<div id="container">
<header>
<h1>Example for Progress Bar with PHP 5.4 and jQuery</h1>
</header>
<!-- Debug Mod --> <!-- <form action="upload.php?show_transfer=on" method="post" id="upload_form" enctype="multipart/form-data" target="result_frame"> -->
<form action="upload.php" method="post" id="upload_form" enctype="multipart/form-data" target="result_frame">
<fieldset>
<legend>Upload Images</legend>
<input type="hidden" name="<?php echo ini_get('session.upload_progress.name');?>" value="<?php Upload::UPLOAD_PROGRESS_PREFIX ?>" />
<label for="file">Images: <input type="file" name="files[]" id="file" multiple="multiple" accept="image/*" required="required" />
<small><em>You can select multiple files at once by clicking multiple files while holding down the "CTRL" key.</em></small></label>
<button type="submit" id="upload">Upload!</button>
<button type="reset" id="cancel">Cancel Upload</button>
<!-- Progress bar here -->
<div id="upload_progress" class="hidden center progress">
<div class="bar"></div>
</div>
</fieldset>
</form>
<iframe id="result_frame" name="result_frame" src="about:blank"></iframe>
<footer>
<p>By <strong><a href="http://ph-7.github.com">pH7</a></strong> © 2012.</p>
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./static/js/ProgressBar.class.js"></script>
<script>
$('#upload').click(function() {
(new UploadBar).upload();
});
$('#cancel').click(function() {
(new UploadBar).cancel();
});
</script>
</html>
|
Download
