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
Ajouter un profil netflix payant - Guide
Ajouter un compte gmail - Guide
Ajouter un compte whatsapp - Guide
Ajouter une signature sur word - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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

Retrouver l'image originale après avoir fait des modifications ?

Facebook invite tout seul !

Ajouter une page dans libre office

Discussions similaires

Newsletters