Upload fichiers : Image barre de progression, Help

saitis · April 2, 2015

Bonjour,

je sollicite votre aide concernant la partie upload sur ma boutique.

Mon fichier upload est en php

et j'aimerais pouvoir faire en sorte que lorsque l'on upload un fichie, une image d'attente apparaissent le temps de l'upload et une fois l'upload terminé qu'un message de fin apparaissent

Le top serait que l'image puisse être en corrélation avec l'upload, du style une barre montante représentant la progression.

Mais bon si déjà j'arrive à mettre une image ce serait bien (chose que je narrive pas du tout à faire)

Ou alors si une autre solution existe je suis preneur.

PS 1.6.0.14

Autre info, mon fichier php est unique c'est à dire qu'il sert à la fois de départ d'upload et de contrôle.

J'ai un peu cherché sur la toile, mais rien ne fonctionne

Si vous avez un script complet, ce serait royal

En vous remerciant pour votre aide, là j'en ai vraiment besoin.

Edited April 2, 2015 by saitis (see edit history)

saitis · April 2, 2015

Re à tous,

je viens de trouver un script plutôt pas mal, cependant il y a soucis.

Lorsque je le test en local, ca fonctionne par contre dans ma boutique test cela bug. http://www.graphicsperso.stickers-is.com/pre-ecoute-pve-gratuit/134-gratuit-demande-de-pre-ecoute-15-secondes-max.html

ca ne copie pas le fichier

et la barre de progression ne fonctionne pas, ce qui encore plus bizarre c'est que ca me recharge ma page url de ma boutique en iframe on dirait juste en dessous du bouton start upload

Ici le script en démo : http://www.orugari.fr/demo/progress-bar/

J'ai essayé aussi en activant l'option Autoriser les iframes dans les champs HTML dans le back office de ma boutique

Je vous met les scripts en espérant que vous pourrez m'aider à trouver ce qui ne va pas :

Contact.php :

<?php
/**********************************************

REQUIREMENT:
# >= PHP 5.4
# Jquery
# Jquery ui (optional)
# session.upload_progress.enabled On. See your phpinfo();
See the whole code for explainations.
I voluntary let the js script on the same page to allow an easy view between the html and the js / jquery
**********************************************/
session_start();
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
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Progress bar upload with jquery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.8.2/themes/dot-luv/jquery-ui.css" />
<link rel="stylesheet" href="progressbar.css" />
</head>
<body>
<div id="main_bloc">

<br />
<br />
<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>
<div class="progress-bar blue stripes" id="bar_blank"> <span class="bar_content" style="width: 0%"></span> </div>
<br />
<br />
<div id="status"></div>
<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
</div>
<div id="footer">

<br />
<br />
<a href="http://validator.w3.org/check?uri=<?=$_SERVER['HTTP_HOST'].$_SERVER["PHP_SELF"]?>&charset=(detect+automatically)&doctype=Inline&group=0" target="_blank">

</a>
</div>
<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>
</body>
</html>

Le fichier de process : upload_frame.php

<?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";
}
?>

En vous remerciant pour votre aide

Edited April 2, 2015 by saitis (see edit history)

prestasafe · April 3, 2015

Salut salut,

as tu fait sous form de module ou la mis un peu à volée dans prestashop ?

L'iframe que est générée n'est pas une erreur 404 par hasard ?

ça ne serait pas l'action dans ton formulaire d'upload qui serait mauvaise ?

saitis · April 4, 2015

Bonsoir guigui,

Non, je ne suis pas passé par un nouveau module.

Lorsque j'envoie un fichier, je n'ai déjà pas la barre de progression d'affichée mais le mot Uploading qui s'affiche et le fichier n'est pas uploadé

Ensuite j'ai une petite fenêtre qui s'ouvre en iframe donc, oui, et là c'est carrément la page d'accueil de ma boutique qui se charge je n'ai pas d'erreur 404 non

J'ai essayé environ 4 ou 5 scripts totalement différent, j'ai à chaque fois ce phénomène.

Quand je test directement le script hors boutique, tout se passe très bien pourtant : http://www.graphicsperso.stickers-is.com/contact.php

mais pas dans la fiche produit (product.tpl) donc : http://www.graphicsperso.stickers-is.com/pre-ecoute-pve-gratuit/134-gratuit-demande-de-pre-ecoute-15-secondes-max.html

Vous pouvez tester sans problème, c'est ma boutique de test

Edited April 4, 2015 by saitis (see edit history)

prestasafe · April 4, 2015

peux tu m'envoyer les fichiers dans un zip et me dire ou les placer ?

as tu une erreur dans ta console javascript ?

saitis · April 4, 2015

Je t'ai envoyé le nécessaire via messagerie

la console javascript, je ne sais pas où elle se trouve par contre

Edited April 4, 2015 by saitis (see edit history)

saitis · April 4, 2015

Je crois rêver, j'ai mis des ../ dans mes liens dans les fichiers et j'avance, j'ai désormais la barre d'upload qui s'affiche.

Juste que le fichier ne s'upload pas par contre..

et la barre monte d'un coup même sur un gros fichier, donc elle apparait mais n'est pas en corélation avec la taille et le temps que prend l'upload

Allez je poursuis mes recherches

Edited April 4, 2015 by saitis (see edit history)

saitis · April 4, 2015

J'ai trouvé la console JS

donc j'ai cela :

TypeError: $(...).jqzoom is not a function v_112_2702d5aaf2566e4bb4d97e5fe66accba.js:424:0
TypeError: $(...).contactable is not a function 134-gratuit-demande-de-pre-ecoute-15-secondes-max.html:118:29
TypeError: $(...).uniform is not a function

j'ai donc désactivé JqZoom

j'ai encore cela :

TypeError: $.uniform is undefined v_113_52718db0793794154ae78df260be3bdc.js:432:0
TypeError: $(...).contactable is not a function 134-gratuit-demande-de-pre-ecoute-15-secondes-max.html:118:29
TypeError: $(...).uniform is not a function

par contre là, je ne sais pas du tout de quoi il s'agit

Edited April 4, 2015 by saitis (see edit history)

prestasafe · April 4, 2015

Tu as ces erreurs lorsque tu as soumit le fomulaire ou tu les as tout le temps ?

j'ai pas encore regardé le code en détail pour li'nstant mais fais attention au chemin dans prestashop, n'hésites pas à utiliser les constantes de prestashop pour avoir des "bons chemins" tu les trouvera dans /config/defines.inc.php

saitis · April 4, 2015

je cherche du côté de ces lignes :

J'ai fini par les supprimer pour voir (je ne sais pas vraiment si elles utiles) : je n'ai donc plus les erreurs :

TypeError: $.uniform is undefined v_113_52718db0793794154ae78df260be3bdc.js:432:0
TypeError: $(...).contactable is not a function 134-gratuit-demande-de-pre-ecoute-15-secondes-max.html:118:29
TypeError: $(...).uniform is not a function

Ensuite l'envoi le fichier, l'upload démarre mais j'ai ces erreurs dans ma console :

TypeError: n.easing[this.easing] is not a function v_113_52718db0793794154ae78df260be3bdc.js:4:698
TypeError: a.getDefaultComputedStyle(...) is null v_113_07bf388bd4f39cc97f178df2262ffeaa.js:3:22995
TypeError: wind.getComputedStyle(...) is null

Ok, je vais véfifier les chemins à l'endroit que tu m'as indiqué, merci

prestasafe · April 4, 2015

Les premieres ligne sont jquery et jquery UI la premiers est obligatoire, la seconde surement aussi avec ton script. La 3eme c'est du css (pour la déco)

je pense vraiment que tu devrais l'isoler dans un module puis executer ton code sur un HOOK spécifique que tu n'aura plus qu'a placer dans ton theme.

saitis · April 4, 2015

Merci beaucoup pour tes infos.

Bon, je vais laisser tomber pour ce soir.

Je ne peux pas isoler cela dans un hook car la partie upload est implémenté dans ma fiche product. entre la personnalisation des produits Et les déclinaisons.

Je pense que si je passe par un hook, je ne pourrai pas retrouvé ce que j'ai mis en place, malheureusement

Upload fichiers : Image barre de progression, Help

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in