Astuces ⇒ PHP facebook twitter youtube

Les image ⇒ & Uploadune images avec barre de progression



Upload de fichier avec barre de progression utilisant Jquery et PHP !

2013/07/04 | Filed under: Jquery, On the web, PHP, Tutoriels and tagged with: , ,

Salut tout le monde !

Aujourd'hui nous allons voir comment créer notre barre de progression pendant l'envoi d'un fichier ! Il me semble que c'est l'un des scripts les plus demande dans le domaine, alors voila la solution:

 

Étape 1: Ce qu'il vous faut

PHP >= 5.4
  • Chez OVH, dans votre fichier .htaccess, écrivez SetEnv PHP_VER 5_4 si vous n'êtes pas a jour (attention aux fonction obsolètes tel que mysql_connect(); )
Jquery
Jquery ui (Option)
session.upload_progress.enabled On. Pour vérifier ça, regardez votre phpinfo(); ou trouvez cette ligne dans votre fichier php.ini
Étape 2:  Le formulaire
Créez votre fichier index.php
 
 
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="POST" id="myForm" enctype="multipart/form-data" target="hidden_iframe">
<input type="hidden" value="myForm" name="<?=ini_get("session.upload_progress.name")?>" />
<label for="userfile">Choose a file:</label>
<input type="file" name="userfile" id="userfile" required />
<br />
<br />
<input type="submit" value="Start Upload" class="ui-corner-all" />
</form>
Étape3: L'iframe
Étant donne qu'il est impossible de traiter des fichiers via ajax, nous allons tout simplement utiliser une astuce pour « simuler » l'asynchrone en inserant et en cachant une iframe contenant le traitement du fichier. Le formulaire doit avoir comme action, l'iframe ! Simple non?
 <iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
Étape 4: Le traitement du fichier
Créer le fichier upload_frame.php
Ici nous traiterons donc l'envoi du fichier (pas la copie !) et afficherons la progression actuelle.
<?php
session_start();
 
$key = ini_get("session.upload_progress.prefix") . "myForm";
if (!empty($_SESSION[$key])) {
    $current = $_SESSION[$key]["bytes_processed"]; // This is the current upload progress
    $total = $_SESSION[$key]["content_length"]; // Total weight of the file
    if($current < $total)
{
echo ceil($current / $total * 100);
}
else
{
echo "100";
}
echo $current < $total ? ceil($current / $total * 100) : 100;
}
else
{
    echo "100";
}
?>
Étape 5: La barre de progression
Utilisant CSS3, une barre qu'elle est belle ! Créez le fichier progressbar.css
<div class="progress-bar blue stripes" id="bar_blank">	<span class="bar_content" style="width: 0%"></span> </div>

Et dans le fichier progressbar.css

.bar_content { display:inline-block; }
 
.progress-bar {
	background-color: #1a1a1a;
	height: 25px;
	padding: 5px;
	width: 90%;
	min-width:250px;
	overflow:hidden;
	 margin: 20px auto;		
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
}
 
.progress-bar span {
	float:left;
	display: inline-block;
	height: 100%;
	background-color: #777;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-transition: width .4s ease-in-out;
	-moz-transition: width 1.4s ease-in-out;
	-ms-transition: width 1.4s ease-in-out;
	-o-transition: width 1.4s ease-in-out;
	transition: width 1.4s ease-in-out;		
 
}
 
/*----------- The color of the progress bar ----------------*/			
 
 
.blue span { background-color: #34e359;  }
 
 
/*----------- The stripes (for any browser) ----------------*/		
 
.stripes span {
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            
 
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
}
 
@-webkit-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
 
@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
 
/*---------------------------*/
Étape 6: Copie du fichier uploadé

Dans le fichier index.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
 
$target_folder = "tmp/"; //where need to upload the file
$file_name = $_FILES["userfile"]['name']; //real file name
if(is_file($target_folder.$file_name)) { $file_name = time()."_".$file_name; } //if file already exist, change the name to not overwrite it
move_uploaded_file($_FILES["userfile"]['tmp_name'], $target_folder.$file_name); //moving the file
}
?>
Étape 7: Le script
Dans index.php

 

<script>
$(document).ready(function(){
// The action before and after upload
function toggleBarVisibility() {
$("#status").show("blind", 1000).html('Uploading...');
$( "#bar_blank" ).css( "display", "block");
$(".bar_content").css('width','0%');
}
// We get the current % on upload_frame.php
function sendRequest() {
$.get('upload_frame.php', function(http) { handleResponse(http); });
}
 
//the function for update the progress bar and check if finish
function handleResponse(http) {
//we set the width with jquery
$(".bar_content").css('width',''+http+'%');
// If still not finish, we refresh the request which get the content of upload_frame.php
if (http < 100) { var t=setTimeout(sendRequest, 1000); }
// If finish, everything here will be done
else
{
//random effect, do what ever you want
$(".bar_content").removeClass(".bar_content").css('width','100%');
$( "#bar_blank" ).delay(2000).hide("highlight", 1000);
$("#status").html('Upload finished !').delay(2000).hide("blind", 1000);
}
}
// The function when you send the Form
function startUpload() {
toggleBarVisibility();
var t=setTimeout(sendRequest, 1000);
}
//everything start here
$("#myForm").submit(function() { if($('#userfile').val() != '') { startUpload(); } });
 
//just stylish button from jquery ui
$( "[type=submit]" ).button();
 
});
</script>

Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces