Comment ajouter à ces script un progress bar et une envoie auto

Fermé

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - 17 juin 2016 à 12:43
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - 21 juin 2016 à 16:27

Bonjour à tous,

Besoin d'aide sur:
Quels script à ajouter à ceux ci bas pour envoyer automatiquement l'image uploadé à un emplacement(dossier) au serveur avec un progress bar sans cliquer le bouton SUBMIT. Semblable à ce qu'on trouve sur https://www.vendito.mg/posts/new
Besoin pour un site d'annonces, Merci beaucoup.

<!doctype html>
<html lang="fr">
<head>
<title>btn</title>
</head>
<style>
#uploadPreview1{
height: 95px;
margin-top: 3px;
}
.fileUpload {
position: relative;
overflow: hidden;
background-color: none;
height: 100px;
width: 135px;
text-align: center;
border-radius: 6px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0px 0px 0px 0px;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.custom-span{ font-family: Arial; font-weight: bold;font-size: 100px; color: #FE57A1}
.custom-para{font-family: arial;font-weight: bold;font-size: 24px; color:#585858;}

</style>
<body>
<form method="post" action="" class="form_DepotAnnonces" enctype="multipart/form-data">
<div class="titreRub" id="grandtitre">AJOUTER DES PHOTOS : </div>

<div id="btnSaar1">
<div class="fileUpload">
<span class="custom-span">
<img id="uploadPreview1" src="images/img_bouton/add_photo.gif">
</span>
<p class="custom-para">Ajouter une photo</p>
<input id="uploadImage1" type="file" class="upload" name="file" onchange="PreviewImage(1);"/>

</div>
</div>
<input name="validerAnnonce" value="Valider" type="submit">
</form>

<script>
function PreviewImage(no) {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
};
}
</script>

</body>
</html>

Cordialement

Lerod

A voir également:

Comment ajouter à ces script un progress bar et une envoie auto
Script vidéo youtube - Guide
Comment ajouter une signature sur word - Guide
Ajouter un compte gmail - Guide
Comment ajouter un compte facebook - Guide
Impossible d'ajouter un ami sur facebook - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38453 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mars 2025 4 740
17 juin 2016 à 15:31

Bonjour,

Tu peux par exemple utiliser ceci :
http://chez-syl.fr/2015/02/jquery-uploader-une-image-en-ajax-avec-un-apercu-avant-envoi/
ou ça :
http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
Modifié par lerod83 le 17/06/2016 à 17:02

Merci,

J'ai essayé avec cela mais je ne sais pas ou est l'erreur

ajax

$("document").ready(function(){

$("#uploadImage1").change(function() {
startUpload();
});

function startUpload(){

$.ajax({
url: "uploadFile.php",
type: "POST",
data: data,
enctype: 'multipart/form-data',
processData: false,
contentType: false
})

}
});

uploadFile.php

<?php

$fichier = $_FILES['file']['tmp_name'];
$targetPath = "upload/".$_FILES['file']['name'];
move_uploaded_file($fichier,$targetPath) ;
?>

jordane45 Messages postés 38453 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 mars 2025 4 740
17 juin 2016 à 17:11

Ouvre la console du navigateur et regarde si il n'y aurait pas un message d'erreur. .

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
Modifié par lerod83 le 20/06/2016 à 13:13

Merci Jordan,
En fait j'ai trouvé un autre moyen et ca marche mais je veux qu'il y ait un Progress bar qui s'affiche durant le traitement (upload) avec % . Pouvez-vous m'aider sur cela s'il vous plait!

Voici mes script:

INDEX.HTML
<html>
<head>
<script src="jquery-2.2.1.min.js"></script>
<style>
.dialog{
display:inline-block;
margin-right:10px;
}
.dialog img{
height:85px;
}
.close-classic{
font-family:arial,sans serif;
font-size:18px;
vertical-align:top;
background:#fff;
color:#000;
padding:3px 10px;
position:relative;
left:-25px;
top:0px;
text-decoration:none;
}

#uploadPreview1{
height: 85px;
margin-top: 3px;
}
.fileUpload {
position: relative;
overflow: hidden;
background-color: gray;
height: 85px;display:inline-block;
text-align: center;
border-radius: 6px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0px 0px 0px 0px;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
#prv{
height:auto;
width:auto;
float:left;
margin-bottom: 28px;
background:none;
}

</style>
</head>

<body>
<div class="rCol">
<div id ="prv"></div>

<div class="fileUpload">
<span class="custom-span">
<img id="uploadPreview1" src="../images/img_bouton/add_photo1.GIF">
</span>
<p class="custom-zpara">Ajouter une photo</p>
<input type="file" id="file" class="upload" name='file' onChange=" return submitForm();">
<input type="hidden" id="filecount" value='0'>
</div>
</div>
<script>

function submitForm() {

var fcnt = $('#filecount').val();
var fname = $('#filename').val();
var imgclean = $('#file');
if(fcnt<=5)
{
data = new FormData();
data.append('file', $('#file')[0].files[0]);

var imgname = $('input[type=file]').val();
var size = $('#file')[0].files[0].size;

var ext = imgname.substr( (imgname.lastIndexOf('.') +1) );
if(ext=='jpg' || ext=='jpeg' || ext=='png' || ext=='gif' || ext=='PNG' || ext=='JPG' || ext=='JPEG')
{
if(size<=5000000)
{
$.ajax({
url: "ajaximage.php",
type: "POST",
data: data,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function(data) {
if(data!='FILE_SIZE_ERROR' || data!='FILE_TYPE_ERROR' )
{
fcnt = parseInt(fcnt)+1;
$('#filecount').val(fcnt);
var img = '<div class="dialog" id ="img_'+fcnt+'" ><img src="img_uploads/'+data+'"><a href="#" id="rmv_'+fcnt+'" onclick="return removeit('+fcnt+')" class="close-classic">x</a></div><input type="hidden" id="name_'+fcnt+'" name="name_'+fcnt+'" value="'+data+'">';
$('#prv').append(img);
if(fname!=='')
{
fname = fname+','+data;
}else
{
fname = data;
}
$('#filename').val(fname);
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
}
else
{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('SORRY SIZE AND TYPE ISSUE');
}

});
return false;
}//end size
else
{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );//Its for reset the value of file type
alert('Sorry File size exceeding from 1 Mb');
}
}//end FILETYPE
else
{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('Sorry Only you can uplaod JPEG|JPG|PNG|GIF file type ');
}
}//end filecount
else
{ imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('You Can not Upload more than 6 Photos');
}
}

function removeit (arg) {
var id = arg;
// GET FILE VALUE
var fname = $('#filename').val();
var fcnt = $('#filecount').val();
// GET FILE VALUE

$('#img_'+id).remove();
$('#rmv_'+id).remove();
$('#img_'+id).css('display','none');

var dname = $('#name_'+id).val();
alert(dname);
$.ajax({
url: 'delete.php',
type: 'POST',
data:{'name':dname},
success:function(a){
console.log(a);
}
});
fcnt = parseInt(fcnt)-1;
$('#filecount').val(fcnt);
var fname = fname.replace(dname, "");
var fname = fname.replace(",,", "");
$('#filename').val(fname);

}
</script>
</body>
</html>

ajaximage.php
<?php
$filetype = array('jpeg','jpg','png','gif','PNG','JPEG','JPG');
foreach ($_FILES as $key )
{
$name =time().$key['name'];

$path='img_uploads/'.$name;
$file_ext = pathinfo($name, PATHINFO_EXTENSION);
if(in_array(strtolower($file_ext), $filetype))
{
if($key['name']<1000000)
{

@move_uploaded_file($key['tmp_name'],$path);
echo $name;

}
else
{
echo "FILE_SIZE_ERROR";
}
}
else
{
echo "FILE_TYPE_ERROR";
}// Its simple code.Its not with proper validation.
}
?>

delete.php
<?php
$path='img_uploads/'.$_POST['name'];

if(@unlink($path))
{
echo "Success";
}
else
{
echo "Failed";
}
?>

Et comment récuperer le nom des images uploadés au moment de "Submiter" (envoyer le formulaire) dans mysql.

Cordialement

Lerod

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
21 juin 2016 à 16:27

l'envoie automatique est resolu, il reste la barre de progression

Merci à tous!

Discussions similaires

Comment savoir comment on nous a ajouté sur Snap

J’aimerai savoir si quelqu’un sait comment cela ce fait que j’ai des ajout sur snap mais qu’il n’y a pas marqué comment on m’a ajouté (ajout rapide, mention etc) il y a juste marqué le nom de la personne et à la place de comment la personne m’a ajouter son identifiant snap. Et je ne pense pas que ce soit un beugue parce que je reçois dés ajout ou là il y a écrit comment on m’a ajouté. Et quand je demande au personne ou ils ont eut mon snap ils me répondent ajout rapide je répond que c’est bizzare puisque ça ne me l’a pas mit et là personne change de sujet ( ce n’est pas la première). Et deuxième question aussi concernant les ajouts, un jour j’ai reçu un ajout sur snap via mention sachant que...