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

amewole 108 Messages postés jeudi 23 mars 2006Date d'inscription 28 février 2013 Dernière intervention - 14 sept. 2009 à 09:42 - Dernière réponse : mahamourta 86 Messages postés jeudi 6 août 2009Date d'inscription 2 septembre 2016 Dernière intervention
- 11 août 2016 à 17:24
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 

6 réponses

Répondre au sujet
Tonio_35 567 Messages postés mercredi 4 octobre 2006Date d'inscription 30 août 2011 Dernière intervention - 14 sept. 2009 à 10:38
0
Utile
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
Commenter la réponse de Tonio_35
amewole 108 Messages postés jeudi 23 mars 2006Date d'inscription 28 février 2013 Dernière intervention - 14 sept. 2009 à 11:56
0
Utile
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.
Commenter la réponse de amewole
Tonio_35 567 Messages postés mercredi 4 octobre 2006Date d'inscription 30 août 2011 Dernière intervention - 15 sept. 2009 à 09:49
0
Utile
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 qui pourrons te servir de base...


_________________________________
Min iPomme
Commenter la réponse de Tonio_35
amewole 108 Messages postés jeudi 23 mars 2006Date d'inscription 28 février 2013 Dernière intervention - 15 sept. 2009 à 23:15
0
Utile
Merci pour vos indications..
Je ne suis pas encore arrivé mais les recherches continuent...
Commenter la réponse de amewole
keitamomo 27 Messages postés mardi 11 septembre 2012Date d'inscription 24 octobre 2017 Dernière intervention - 8 août 2016 à 20:53
0
Utile
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.
Commenter la réponse de keitamomo
mahamourta 86 Messages postés jeudi 6 août 2009Date d'inscription 2 septembre 2016 Dernière intervention - 11 août 2016 à 17:24
0
Utile
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
Commenter la réponse de mahamourta

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.