Upload d'images : prévisualisation avant upload avec php+ajax+javascript
Signaler
amewole
mahamourta
- Messages postés
- 108
- Date d'inscription
- jeudi 23 mars 2006
- Statut
- Membre
- Dernière intervention
- 28 février 2013
mahamourta
- Messages postés
- 86
- Date d'inscription
- jeudi 6 août 2009
- Statut
- Membre
- Dernière intervention
- 2 septembre 2016
A voir également:
- Upload image javascript
- Upload image javascript php - Meilleures réponses
- Upload image ajax - Meilleures réponses
- Redimensionner image javascript avant upload - Conseils pratiques - PHP
- Popup image javascript - Guide
- Script upload image php - Guide
- Faire défiler des images javascript - Guide
- Javascript : Faire défiler en boucle une image dans un <table> - CodeS SourceS - Guide
6 réponses
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
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.
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
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
- 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
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