Upload d'images : prévisualisation avant upload avec php+ajax+javascript
amewole
- 11 août 2016 à 17:24
- 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
- Javascript upload file ajax
- Upload image jquery php - Meilleures réponses
- Redimensionner image avec flash avant de l'uploader via php... Possible??? - Forum - Flash
- Upload images pour forums et sites mutualisés (ajax + php + flash 10) - Codes sources - PHP (Fichier / Disque)
- Upload multiple php [ump] : téléchargement multiple (ajout en dynamique) vers un site - Codes sources - Javascript (Divers)
- Upload http- php - Codes sources - Visual Basic / VB.NET (Réseau & Internet)
- Upload multiple php/javascript en 36 lignes de code - Codes sources - Visual Basic / VB.NET (Fichier / Disque)
6 réponses
- 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
- 108
- Date d'inscription
- jeudi 23 mars 2006
- Dernière intervention
- 28 février 2013
- Messages postés
- 27
- Date d'inscription
- mardi 11 septembre 2012
- Dernière intervention
- 24 octobre 2017
- 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.