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:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741
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

0
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) ;
?>
0
jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741
17 juin 2016 à 17:11
Ouvre la console du navigateur et regarde si il n'y aurait pas un message d'erreur. .
0
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
0
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!
0

Discussions similaires

Comment savoir comment on nous a ajouté sur Snap
Laura -
Lob6 -

15 réponses