H5中的拖拽文件上傳
阿新 • • 發佈：2017-07-07
ext block point over ive orm children anim 代碼
一：介紹
1.內容摘要
2.主要設計的技術
3.drag與drop事件
4.drag與drop的部分重要代碼
5.File Api
6.formData
二：程序演示
1.
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <script src="D:\jquery\jquery-1.12.4.min.js"></script> 7 <style> 8 .dashboard_target_box { 9 width:250px; 10 height:105px; 11 border:3px dashed #E5E5E5; 12 text-align:center; 13 position:absolute; 14 z-index:2000; 15 top:0; 16 left:0; 17 cursor:pointer 18 } 19 .dashboard_target_box.over { 20 border:3px dashed #000; 21 background:#ffa 22 } 23 .dashboard_target_messages_container { 24 display:inline-block; 25 margin:12px 0 0; 26 position:relative; 27 text-align:center; 28 height:44px; 29 overflow:hidden; 30 z-index:2000 31 } 32 .dashboard_target_box_message { 33position:relative; 34 margin:4px auto; 35 font:15px/18px helvetica, arial, sans-serif; 36 font-size:15px; 37 color:#999; 38 font-weight:normal; 39 width:150px; 40 line-height:20px 41 } 42 .dashboard_target_box.over #dtb-msg1 { 43 color:#000; 44 font-weight:bold 45 } 46 .dashboard_target_box.over #dtb-msg3 { 47 color:#ffa; 48 border-color:#ffa 49 } 50 #dtb-msg2 { 51 color:orange 52 } 53 #dtb-msg3 { 54 display:block; 55 border-top:1px #EEE dotted; 56 padding:8px 24px 57 } 58 </style> 59 <script> 60 $(document).ready(function(){ 61 62 //設計一段比較流行的滑動樣式 63 $(‘#drop_zone_home‘).hover(function(){ 64 $(this).children(‘p‘).stop().animate({top:‘0px‘},200); 65 },function(){ 66 $(this).children(‘p‘).stop().animate({top:‘-44px‘},200); 67 }); 68 69 70 //要想實現拖拽，首頁需要阻止瀏覽器默認行為，一個四個事件。 71 $(document).on({ 72 dragleave:function(e){ //拖離 73 e.preventDefault(); 74 $(‘.dashboard_target_box‘).removeClass(‘over‘); 75 }, 76 drop:function(e){ //拖後放 77 e.preventDefault(); 78 }, 79 dragenter:function(e){ //拖進 80 e.preventDefault(); 81 $(‘.dashboard_target_box‘).addClass(‘over‘); 82 }, 83 dragover:function(e){ //拖來拖去 84 e.preventDefault(); 85 $(‘.dashboard_target_box‘).addClass(‘over‘); 86 } 87 }); 88 89 //================上傳的實現 90 var box = document.getElementById(‘target_box‘); //獲得到框體 91 92 box.addEventListener("drop",function(e){ 93 94 e.preventDefault(); //取消默認瀏覽器拖拽效果 95 96 var fileList = e.dataTransfer.files; //獲取文件對象 97 //fileList.length 用來獲取文件的長度（其實是獲得文件數量） 98 99 //檢測是否是拖拽文件到頁面的操作 100 if(fileList.length == 0){ 101 $(‘.dashboard_target_box‘).removeClass(‘over‘); 102 return; 103 } 104 //檢測文件是不是圖片 105 if(fileList[0].type.indexOf(‘image‘) === -1){ 106 $(‘.dashboard_target_box‘).removeClass(‘over‘); 107 return; 108 } 109 110 //var img = window.webkitURL.createObjectURL(fileList[0]); 111 //拖拉圖片到瀏覽器，可以實現預覽功能 112 113 xhr = new XMLHttpRequest(); 114 xhr.open("post", "test.php", true); 115 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 116 117 var fd = new FormData(); 118 fd.append(‘ff‘, fileList[0]); 119 120 xhr.send(fd); 121 122 123 },false); 124 125 }); 126 </script> 127 </head> 128 129 <body> 130 <div id="target_box" class="dashboard_target_box"> 131 <div id="drop_zone_home" class="dashboard_target_messages_container"> 132 <p id="dtb-msg2" class="dashboard_target_box_message" style="top:-44px">選擇你的圖片<br> 133 開始上傳</p> 134 <p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px">拖動圖片到<br> 135 這裏</p> 136 </p> 137 </div> 138 </div> 139 </body> 140 </html>
2.test.php
1 <?php 2 if(!empty($_FILES["ff"])){ 3 move_uploaded_file($_FILES["ff"]["tmp_name"],$_FILES["ff"]["name"]); 4 } 5 ?> 6 <meta charset="utf-8"> 7 <form action="" method="post" enctype="multipart/form-data"> 8 <input type="file" name="ff"> 9 <input type="submit" value="上傳"> 10 </form>
H5中的拖拽文件上傳