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

lerod83 Messages postés 69 Statut Membre -
lerod83 Messages postés 69 Statut Membre - 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

Afficher la suite

1 réponse

Réponse 1 / 1
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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
1. lerod83 Messages postés 69 Statut Membre
  
  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
2. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Ouvre la console du navigateur et regarde si il n'y aurait pas un message d'erreur. .
  
  0
3. lerod83 Messages postés 69 Statut Membre
  
  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
4. lerod83 Messages postés 69 Statut Membre
  
  l'envoie automatique est resolu, il reste la barre de progression
  
  Merci à tous!
  
  0

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

1 réponse

Discussions similaires

Newsletters