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
- 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
- Javascript upload image - 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
- Messages postés
- 567
- Date d'inscription
- mercredi 4 octobre 2006
- Statut
- Membre
- Dernière intervention
- 30 août 2011
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
- 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.
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.
- Messages postés
- 567
- Date d'inscription
- mercredi 4 octobre 2006
- Statut
- Membre
- Dernière intervention
- 30 août 2011
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
- 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