H5C3--FileReader和拖拽的应用

 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>