Загрузка файла на PHP с индикатором на JQuery

Для выполнения этого сценария необходимо установить PHP APC библиотеки расширений или PHP 5.4, просто выполните следующие действия. Для дизайна мы реализовали библиотеку загрузки CSS. Загрузка файла на PHP с индикатором на JQuery - это хороший вариант для загрузки файлов на сервер.

Установка Windows, APC
Перейдите по этой ссылке
В php.ini включить apc.rfc1867 = о

Linuk APC Установка
Перейдите по этой ссылке
В php.ini включить apc.rfc1867 = о
php.ini находится в /etc/php.ini

get_progress.php
Содержит PHP код, который определяет статус загрузки файла с сервера.

<?php session_start(); error_reporting(0); /* // For PHP 5.4 users $progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name $current = $_SESSION[$progress_key]["bytes_processed"]; $total = $_SESSION[$progress_key]["content_length"]; echo $current < $total ? ceil($current / $total * 100) : 100; */ // For PHP 5.2+ php_apc.dll or php_apc.so holder if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){ $status = apc_fetch('upload_'.$_GET['progress_key']); echo $status['current']/$status['total']*100; exit; } ?>

index.php
Главный файл с формой загрузки на PHP.

<?php $uiq = uniqid(); $image_folder = "uploads/"; $uploaded = false; if(isset($_POST['upload_image'])){ if($_FILES['userImage']['error'] == 0 ){ $up = move_uploaded_file($_FILES['userImage']['tmp_name'], $image_folder.$_FILES['userImage']['name']); if($up){ $uploaded = true; } } } ?> <form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="index.php?progress=<?php echo($uiq)?>" method="post" class="well"> <label>Upload File</label> <input type="file" name="userImage" id="userImage" /> <span class="badge badge-info" style="display:none;">0%</span> <input type="submit" class="btn btn-success" name="upload_image" id="upload_image" value="UPLOAD FILE" /> <div class="progress" style="display:none;"><div class="bar" style="width:0%;"></div></div> </form>

JavaScript файл
Содержит простые JavaScript коды, осуществляемые с помощью Jquery свойств. Получение процесса «файл-сервер» каждые несколько секунд.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="application/javascript"> $(document).ready(function(){ var randIDS = '<?php echo $uiq?>'; // Add Hidden Field var hidden = $("<input>"); hidden.attr({ name:"APC_UPLOAD_PROGRESS", id:"progress_key", type:"hidden", value:randIDS }); $("#uploadImage").prepend(hidden); $("#uploadImage").submit(function(e){ var p = $(this); p.attr('target','tmpForm'); // creating iframe if($("#tmpForm").length == 0){ var frame = $("<iframe>"); frame.attr({ name:'tmpForm', id:'tmpForm', action:'about:blank', border:0 }).css('display','none'); p.after(frame); } // Start file upload $.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data){ var uploaded = parseInt(data); if(uploaded == 100){ $(".progress, .badge").hide(); clearInterval(loadLoader); } else if(uploaded < 100) { $(".progress, .badge").show(); $(".badge").text(uploaded+"%"); var cWidth = $(".bar").css('width', uploaded+"%"); } if(uploaded < 100) var loader = setInterval(loadLoader,2000); }); var loadLoader = function(){ $.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data) { var uploaded = parseInt(data); if(uploaded == 100){ $(".progress, .badge").hide(); parent.location.href="index.php?success"; } else if(uploaded < 100) { $(".progress, .badge").show(); $(".badge").text(uploaded+"%"); var cWidth = $(".bar").css('width', uploaded+"%"); } }); } });}); </script>