1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 min-height: 202px; 9 min- 200px; 10 border: 1px solid #ccc; 11 } 12 .img img { 13 border: 4px solid #999999; 14 margin-left: 5px; 15 } 16 </style> 17 </head> 18 <body> 19 <form action=""> 20 文件： <input type="file" name="myFile" id="myFile"> <br> 21 <input type="submit"> 22 </form> 23 <div class="img"> 24 <!--<img src="" alt="">--> 25 </div> 26 <script> 27 /* 针对于目标元素的事件 28 * ondragenter:当被拖拽元素进入到目标元素时触发 29 * ondragover:当被拖拽元素在目标元素上方时持续触发 30 * ondragleave:当被拖拽元素离开目标元素时触发 31 * ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/ 32 var div = document.querySelector('div'); 33 34 document.ondragenter = function (e) { 35 36 } 37 document.ondragover = function (e) { 38 // 阻止默认行为 39 e.preventDefault(); 40 } 41 document.ondragleave = function (e) { 42 43 } 44 document.ondrop = function (e) { 45 // 阻止浏览器默认打开图片的跳转浏览图片页面的行为 46 e.preventDefault(); 47 /*实现预览 48 * 1.读取文件资源--FileReader 49 * 2.获取读取结果：onload + result*/ 50 var reader = new FileReader(); 51 52 /*读取*/ 53 /*当用户拖拽文件到目标元素的时候，拖拽操作会将这些文件资源存储在e.dataTransfer.files对象中*/ 54 55 for (var i = 0; i < e.dataTransfer.files.length; i++) { 56 reader.readAsDataURL(e.dataTransfer.files[i]); 57 //console.log(e.dataTransfer.files[0]); 58 /*onload: 59 * onabort: 60 * onerror: 61 * onloadstart: 62 * onprogress:*/ 63 var img = document.createElement('img'); 64 img.style.width = 100 + 'px'; 65 img.style.height = 100 + 'px'; 66 div.appendChild(img); 67 reader.onload = function () { 68 69 img.src = reader.result; 70 71 } 72 73 } 74 75 } 76 77 </script> 78 </body> 79 </html>