<!doctype html> <head> <meta charset="utf-8" /> <style type="text/css"> body{ background-color:#b2bdc6; } .box{ background-color:gray; height:80%; width:20%; top:10%; position:fixed; box-shadow: 10px 10px 10px #616161; text-align:center; } #conteneur{ display:inline-block; width:70px; margin-left:200px; } </style> <script type="text/javascript"> function stp(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { if (!e) { var fichier = document.getElementById('fileinput').files; } else { stp(e); var fichier = e.dataTransfer.files; } if (fichier[0].type.match('image.*')) { var ur=window.URL.createObjectURL(fichier[0]); document.getElementById('conteneur').src = ur; window.URL.revokeObjectURL(ur); } } </script> </head> <body> <div class='box' ondragenter="stp(event)" ondragover="stp(event)" ondrop="drop(event)"> boite a drop </div> <br> <div> <input type='file' multiple='multiple' id='fileinput' onchange='drop()'> </div> <br> <img id='conteneur'></div> </body> </html>