拖拽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta name="name" content="content" charset="utf-8"> 6 </head> 7 <body> 8 <div class="container" style="widht:500px;height:500px;border:1px solid #ddd"> 9 <p class="text">请将图片文件拖拽至此区域！</p> 10 </div> 11 <script src="jquery-1.12.4.min.js"></script> 12 <script type="text/javascript"> 13 $(function() { 14 /*思路： 15 *1.熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为 16 *2.拖拽放置后，获取到文件对象集合：e.dataTransfer.files 17 *3.循环该集合中的每个文件对象，判断文件类型以及文件大小，是指定类型则进行相应的操作 18 *4.读取文件信息对象：new FileReader()，它有读取文件对象为DataUrl等方法：readAsDataURL(文件对象)、读取成功之后触发的事件：onload事件等，this.result为读取到的数据 19 *5.在FileReader对象中的几个事件中进行相应的逻辑处理 20 * 21 */ 22 23 //必须将jq对象转换为js对象，调用原生方法 24 var oDiv = $(".container").get(0); 25 var oP = $(".text"); 26 //进入 27 oDiv.ondragenter = function() { 28 oP.html(''); 29 } 30 //移动，需要阻止默认行为，否则直接在本页面中显示文件 31 oDiv.ondragover = function(e) { 32 33 e.preventDefault(); 34 } 35 //离开 36 oDiv.ondragleave = function() { 37 oP.html('请将图片文件拖拽至此区域！'); 38 } 39 //拖拽放置，也需要阻止默认行为 40 oDiv.ondrop = function(e) { 41 42 e.preventDefault(); 43 //获取拖拽过来的对象,文件对象集合 44 var fs = e.dataTransfer.files; 45 //若为表单域中的file标签选中的文件，则使用form[表单name].files[0]来获取文件对象集合 46 //打印长度 47 console.log(fs.length); 48 //循环多文件拖拽上传 49 for (var i = 0; i < fs.length; i++) { 50 //文件类型 51 var _type = fs[i].type; 52 53 console.log(_type); 54 //判断文件类型 55 if (_type.indexOf('image') != -1) { 56 //文件大小控制 57 console.log(fs[i].size); 58 //读取文件对象 59 var reader = new FileReader(); 60 //读为DataUrl,无返回值 61 reader.readAsDataURL(fs[i]); 62 reader.onloadstart = function(e) { 63 //开始加载 64 } 65 // 这个事件在读取进行中定时触发 66 reader.onprogress = function(e) { 67 68 $("#total").html(e.total); 69 } 70 71 //当读取成功时触发，this.result为读取的文件数据 72 reader.onload = function() { 73 //文件数据 74 // console.log(this.result); 75 //添加文件预览 76 var oImg = $("<img style='width:100px;' src='' />"); 77 oImg.attr("src", this.result); 78 $(oDiv).append(oImg); //oDiv转换为js对象调用方法 79 } 80 //无论成功与否都会触发 81 reader.onloadend = function() { 82 if (reader.error) { 83 console.log(reader.error); 84 } else { 85 //上传没有错误，ajax发送文件，上传二进制文件 86 } 87 } 88 } else { 89 alert('请上传图片文件！'); 90 } 91 } 92 93 } 94 }); 95 </script> 96 </body> 97 </html>
