Upload d'images : prévisualisation avant upload avec php+ajax+javascript
amewole
Messages postés
108
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
28 février 2013
-
14 sept. 2009 à 09:42
mahamourta Messages postés 85 Date d'inscription jeudi 6 août 2009 Statut Membre Dernière intervention 2 septembre 2016 - 11 août 2016 à 17:24
mahamourta Messages postés 85 Date d'inscription jeudi 6 août 2009 Statut Membre Dernière intervention 2 septembre 2016 - 11 août 2016 à 17:24
A voir également:
- Upload image ajax
- Upload ajax - Meilleures réponses
- Upload image php ajax - Meilleures réponses
- Ajax synchrone - Conseils pratiques -Javascript
- Convolution image - Conseils pratiques -Java
- Inverser une image photoshop - Forum Graphisme/design
- Form image ✓ - Forum Visual Basic
- Tuto ajax ✓ - Forum PHP
6 réponses
Tonio_35
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
11
14 sept. 2009 à 10:38
14 sept. 2009 à 10:38
Hello,
Tu as essayé de faire un truck du style :
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
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
amewole
Messages postés
108
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
28 février 2013
14 sept. 2009 à 11:56
14 sept. 2009 à 11:56
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.
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.
Tonio_35
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
11
15 sept. 2009 à 09:49
15 sept. 2009 à 09:49
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
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
amewole
Messages postés
108
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
28 février 2013
15 sept. 2009 à 23:15
15 sept. 2009 à 23:15
Merci pour vos indications..
Je ne suis pas encore arrivé mais les recherches continuent...
Je ne suis pas encore arrivé mais les recherches continuent...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
keitamomo
Messages postés
27
Date d'inscription
mardi 11 septembre 2012
Statut
Membre
Dernière intervention
24 octobre 2017
8 août 2016 à 20:53
8 août 2016 à 20:53
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.
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.
mahamourta
Messages postés
85
Date d'inscription
jeudi 6 août 2009
Statut
Membre
Dernière intervention
2 septembre 2016
11 août 2016 à 17:24
11 août 2016 à 17:24
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
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