Upload d'images : prévisualisation avant upload avec php+ajax+javascript
amewole
- Messages postés
- 108
- Date d'inscription
- jeudi 23 mars 2006
- Dernière intervention
- 28 février 2013
- Messages postés
- 86
- Date d'inscription
- jeudi 6 août 2009
- 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
- PHP : Upload image to mysql - CodeS SourceS - Guide
- Convertir rapidement un fichier uploadé (image) et obtenir les valeurs des clefs (convertbin2ascii) - Codes sources - ASP / ASP.NET (Formulaires)
- PHP : Upload images securise - CodeS SourceS - Guide
- Upload image - Codes sources - PHP (Graphique)
- Upload images pour forums et sites mutualisés (ajax + php + flash 10) - Codes sources - PHP (Fichier / Disque)
6 réponses
/0047608bb6ac49bb919f45137ea9f544/auth-avatar/8d324dcd5bba4d8824cf0a3f6ef21aa0-Tonio_35)
- Messages postés
- 567
- Date d'inscription
- mercredi 4 octobre 2006
- 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
- 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
- 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
- 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
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.