1. Accueil
  2. Forum Codes-Sources
  3. PHP

Upload d'images : prévisualisation avant upload avec php+ajax+javascript

Signaler
Messages postés
108
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
28 février 2013
 -
Messages postés
86
Date d'inscription
jeudi 6 août 2009
Statut
Membre
Dernière intervention
2 septembre 2016
 -
Bonjour à vous tous,

Je suis à la recherche d'un script php+ajax+javascript permettant de faire un preview des images avant le upload c'est à dire que une fois l'image sélectionnée par l'utilisateur on doit faire un visu(préview) sur l'image minituarisée(si nécessaire) avant le upload effectif et cela sur toutes les images à uploader maxi 5 images..
Je ne connais pas vraiment ajax qui est indispensable pour ces genres de traitements.


D'avance je vous remercie à vous tous...
Afficher la suite
A voir également:

6 réponses

Réponse 1 / 6
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
 10
Hello,

Tu as essayé de faire un truck du style : 

Pas d'image


function showpict(imagePath)
{
  document.getElementById('previmg').innerHTML = '';
}


Je ne pense pas que ca marche, mais je peux pas tester donc...

Sinon tu peux uploader l'image sur le onchange via l'ajax dans un répertoire temporaire et l'afficher. Quand le formulaire est soumis, tu déplace l'image dans le bon répertoire...

_________________________________
Min iPomme
Réponse 2 / 6
Messages postés
108
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
28 février 2013
Hello,

je vais essayer ce bout de code et je ferai signe. Par ailleurs, je voudrais avoir un tableau dans lequel j'afficherai les images au fur et à mesure jusqu'à un nombre limité d'iamges à savoir 5 maxi puis avec possibilité d'en suprimer dans le preview exactement comme cela se fait dans le site de petites annonces leboncoin.fr.

merci.
Réponse 3 / 6
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
 10
En fait je suis sur que mon code ne fonctionneras pas...

Il faudrait les uploader au fur et à mesure avec un peut d'ajax...

Pour ta seconde question, je pense qu'un peut de Javascript feras l'affaire...

En cherchant un peut tu trouveras des scripts...
ICI et là qui pourrons te servir de base...


_________________________________
Min iPomme
Réponse 4 / 6
Messages postés
108
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
28 février 2013
Merci pour vos indications..
Je ne suis pas encore arrivé mais les recherches continuent...
Réponse 5 / 6
Messages postés
27
Date d'inscription
mardi 11 septembre 2012
Statut
Membre
Dernière intervention
24 octobre 2017
Bonsoir à tous.

Je suis en train de finaliser un formulaire et je cherche un systeme qui va permettre a un utilisateur de visualiser l'image qu'il uploade avant de le valider. Est ce que quelqu'un aurait une solution?

Cordialement.
Réponse 6 / 6
Messages postés
86
Date d'inscription
jeudi 6 août 2009
Statut
Membre
Dernière intervention
2 septembre 2016
Bonsoir à tous.

J'ai trouvé quelque chose qui va aidé ceux qui veulent mettre en place ce genre de système. J'ai fait seulement un copier-coller et le resultat n'est pas mal.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
   
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
   
   
   
  <style type='text/css'> 
  </style>
   
 
 
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
             
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
             
            reader.readAsDataURL(input.files[0]);
        }
    }
     
    $("#imgInp").change(function(){
        readURL(this);
    });
});//]]> 
 
</script>
 
 
</head>
<body>
      <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>
   
</body>
 
 
</html>

Cdlt
Répondre Posez votre question