Je construis un réseau social de base et lors de l'enregistrement, l'utilisateur télécharge une image d'affichage. Fondamentalement, je voulais afficher l'image, comme un aperçu sur la même page que le formulaire, juste après la sélection et avant la soumission du formulaire.
Est-ce possible?
Voici l'exemple complet pour prévisualiser l'image avant qu'elle ne soit téléchargée.
HTML :
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://goo.gl/r57ze"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>
JavaScript :
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
cela peut être fait très facilement avec HTML 5, voir ce lien http://www.html5rocks.com/en/tutorials/file/dndfiles/
Je pense que nous avons eu une discussion connexe plus tôt : comment télécharger une image d'aperçu avant de télécharger via JavaScript
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
