H5中的拖拽文件上传-----------------需修改，需测试

一：介绍

1.内容摘要

2.主要设计的技术

3.drag与drop事件

4.drag与drop的部分重要代码

5.File Api

6.formData

二：程序演示

  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 { 33     position: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中的拖拽文件上传-----------------需修改，需测试相关推荐

php 拖动多个文件上传,dropzone拖拽文件上传一次上传多个文件的方法
用dropzone插件拖拽文件上传默认情况是把一个文件拖到浏览器后就立即自动上传,参考前文<用dropzone插件拖拽文件上传>,如果需要一次上传多个文件怎么办?本文将介绍其实现方法. d ...
HTML5拖拽文件上传
上传文件 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称.大小.类型.和修改时间. file类型的 ...
dropzone java实例_Java实现拖拽文件上传dropzone.js的简单使用示例代码
Java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. 自己写的拖拽文件至一个按钮上传的功能,前端及java代码如下: js ...
dropzone.js应用java_拖拽文件上传（Java篇）dropzone.js的简单使用
java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzon ...
vue-quill-editor图片大小的编辑，拖拽，上传视频
vue-quill-editor图片大小的编辑,拖拽,上传视频在vue组件中注册和使用 <quill-editor v-model="formInline.viewConfig&qu ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
webuploader html5,在Vue项目中使用WebUploader实现文件上传
简介: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流 ...
Android webview支持H5页面通过js实现文件上传、图片上传
一.问题场景: 项目中遇到通过网页上传文件的需求,IOS直接是支持的,安卓端却没反应,有些机型甚至闪退.其实是Android的webview默认是不支持<input type="fil ...
JAVA中使用FTPClient实现文件上传下载
在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在commons-net包中)实现上传下载文件 ...

H5中的拖拽文件上传-----------------需修改，需测试

H5中的拖拽文件上传-----------------需修改，需测试相关推荐

最新文章

热门文章