- 浏览: 28975 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
super3949:
再补充一下,他们那里用的MethodInvokingJobDe ...
spring+quartz集群 -
super3949:
你好,请问你一个问题,MethodInvokingJobDet ...
spring+quartz集群 -
wx_hello:
java.rmi.ConnectException: Conn ...
java-rmi简单入门
转载自【http://www.656463.com/article/338】
关于这个拖拽上传,其实国外有很多网站已经有这样的应用,最早推出拖拽上传应用的是 Gmail,它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送,但其实现在利用HTML5的功能实现,主要借助于新版支持的浏览器来实现,IE还是弱很多
拖拽上传应用主要使用了以下 HTML5技术:
Drag&Drop:
HTML5基于拖拽的事件机制.
File API:
可以很方便的让 Web 应用访问文件对象,File API包括FileList、Blob、File、FileReader、URI scheme,本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。
FormData:
FormData 是基于XMLHttpRequest Level 2的新接口,可以方便 web 应用模拟 Form 表单数据,最重要的是它支持文件的二进制流数据,这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。
HTML5Drag & Drop 事件
过去我们想实现网页中的拖拽效果,基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果,为了实现实时的拖拽移动效果,还要不停地获取鼠标的坐标,还要不停的修改元素的位置,代码要堆很多,而且性能上也很不好(不停地修改元素位置会导致页面reflow,除非绝对定位),现在有了html5原生的Drag & Drop 拖拽事件,真的是方便了许多,用”事半功倍”来形容绝不为过。
Drag & Drop 包括以下事件:
dragstart:要被拖拽的元素开始拖拽时触发,这个事件对象是被拖拽元素
dragenter:拖拽元素进入目标元素时触发,这个事件对象是目标元素
dragover:拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素
dragleave:拖拽某元素离开目标元素时触发,这个事件对象是目标元素
dragend:在drop之后触发,就是拖拽完毕时触发,这个事件对象是被拖拽元素
drop:将被拖拽元素放在目标元素内时触发,这个事件对象是目标元素完成一次成功页面元素拖拽的行为事件过程: dragstart –> dragenter –> dragover –> drop –> dragend
获取文件数据HTML5File API
File API 中的 FileList 接口,它主要通过两个途径获取本地文件列表:
一种是 <input type="file">的表单形式,
一种是 e.dataTransfer.files拖拽事件传递的文件信息
1
var fileList = e.dataTransfer.files;
使用files 方法将会获取到拖拽文件的数组形势的数据,每个文件占用一个数组的索引,如果该索引不存在文件数据,将返回 null 值。可以通过length属性获取文件数量.
1
var fileNum = fileList.length;
文件类型
1
fileList[0].type.indexOf (’image’)
AJAX 上传图片(file.getAsBinary& FormData)
file.getAsBinary获取文件流很简单,但是要想上传数据,就要模拟一下表单的数据格式了,首先看看模拟表单的 js 代码, FormData模拟表单数据时更是简洁,不用麻烦的去拼字符串,而是直接将数据 append 到 formdata 对象中即可
HTML5+Springmvc实现拖拽文件上传实例
完整源代码
springmvc上传的配置
控制类
关于这个拖拽上传,其实国外有很多网站已经有这样的应用,最早推出拖拽上传应用的是 Gmail,它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送,但其实现在利用HTML5的功能实现,主要借助于新版支持的浏览器来实现,IE还是弱很多
拖拽上传应用主要使用了以下 HTML5技术:
Drag&Drop:
HTML5基于拖拽的事件机制.
File API:
可以很方便的让 Web 应用访问文件对象,File API包括FileList、Blob、File、FileReader、URI scheme,本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。
FormData:
FormData 是基于XMLHttpRequest Level 2的新接口,可以方便 web 应用模拟 Form 表单数据,最重要的是它支持文件的二进制流数据,这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。
HTML5Drag & Drop 事件
过去我们想实现网页中的拖拽效果,基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果,为了实现实时的拖拽移动效果,还要不停地获取鼠标的坐标,还要不停的修改元素的位置,代码要堆很多,而且性能上也很不好(不停地修改元素位置会导致页面reflow,除非绝对定位),现在有了html5原生的Drag & Drop 拖拽事件,真的是方便了许多,用”事半功倍”来形容绝不为过。
Drag & Drop 包括以下事件:
dragstart:要被拖拽的元素开始拖拽时触发,这个事件对象是被拖拽元素
dragenter:拖拽元素进入目标元素时触发,这个事件对象是目标元素
dragover:拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素
dragleave:拖拽某元素离开目标元素时触发,这个事件对象是目标元素
dragend:在drop之后触发,就是拖拽完毕时触发,这个事件对象是被拖拽元素
drop:将被拖拽元素放在目标元素内时触发,这个事件对象是目标元素完成一次成功页面元素拖拽的行为事件过程: dragstart –> dragenter –> dragover –> drop –> dragend
//要想实现拖拽,首页需要阻止浏览器默认行为,一共四个事件。 $(document).on({ dragleave:function(e){ //拖离 e.preventDefault(); $('.dashboard_target_box').removeClass('over'); }, drop:function(e){ //拖后放 e.preventDefault(); }, dragenter:function(e){ //拖进 e.preventDefault(); $('.dashboard_target_box').addClass('over'); }, dragover:function(e){ //拖来拖去 e.preventDefault(); $('.dashboard_target_box').addClass('over'); } });
获取文件数据HTML5File API
File API 中的 FileList 接口,它主要通过两个途径获取本地文件列表:
一种是 <input type="file">的表单形式,
一种是 e.dataTransfer.files拖拽事件传递的文件信息
1
var fileList = e.dataTransfer.files;
使用files 方法将会获取到拖拽文件的数组形势的数据,每个文件占用一个数组的索引,如果该索引不存在文件数据,将返回 null 值。可以通过length属性获取文件数量.
1
var fileNum = fileList.length;
文件类型
1
fileList[0].type.indexOf (’image’)
AJAX 上传图片(file.getAsBinary& FormData)
file.getAsBinary获取文件流很简单,但是要想上传数据,就要模拟一下表单的数据格式了,首先看看模拟表单的 js 代码, FormData模拟表单数据时更是简洁,不用麻烦的去拼字符串,而是直接将数据 append 到 formdata 对象中即可
xhr = new XMLHttpRequest(); xhr.open("post", "test.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('ff', fileList[0]); xhr.send(fd);
HTML5+Springmvc实现拖拽文件上传实例
完整源代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5拖拽文件上传</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style> .dashboard_target_box { width: 250px; height: 105px; border: 3px dashed #E5E5E5; text-align: center; position: absolute; z-index: 2000; top: 0; left: 0; cursor: pointer } .dashboard_target_box.over { border: 3px dashed #000; background: #ffa } .dashboard_target_messages_container { display: inline-block; margin: 12px 0 0; position: relative; text-align: center; height: 44px; overflow: hidden; z-index: 2000 } .dashboard_target_box_message { position: relative; margin: 4px auto; font: 15px/18px helvetica, arial, sans-serif; font-size: 15px; color: #999; font-weight: normal; width: 150px; line-height: 20px } .dashboard_target_box.over #dtb-msg1 { color: #000; font-weight: bold } .dashboard_target_box.over #dtb-msg3 { color: #ffa; border-color: #ffa } #dtb-msg2 { color: orange } #dtb-msg3 { display: block; border-top: 1px #EEE dotted; padding: 8px 24px } </style> <script> $(document).ready(function() { //设计一段比较流行的滑动样式 $('#drop_zone_home').hover(function() { $(this).children('p').stop().animate({ top : '0px' }, 200); }, function() { $(this).children('p').stop().animate({ top : '-44px' }, 200); }); //要想实现拖拽,首页需要阻止浏览器默认行为,一个四个事件。 $(document).on({ dragleave : function(e) { //拖离 e.preventDefault(); $('.dashboard_target_box').removeClass('over'); }, drop : function(e) { //拖后放 e.preventDefault(); }, dragenter : function(e) { //拖进 e.preventDefault(); $('.dashboard_target_box').addClass('over'); }, dragover : function(e) { //拖来拖去 e.preventDefault(); $('.dashboard_target_box').addClass('over'); } }); //================上传的实现 var box = document.getElementById('target_box'); //获得到框体 box.addEventListener("drop", function(e) { e.preventDefault(); //取消默认浏览器拖拽效果 var fileList = e.dataTransfer.files; //获取文件对象 //fileList.length 用来获取文件的长度(其实是获得文件数量) //检测是否是拖拽文件到页面的操作 if (fileList.length == 0) { $('.dashboard_target_box').removeClass('over'); return; } //检测文件是不是图片 /*if (fileList[0].type.indexOf('image') === -1) { $('.dashboard_target_box').removeClass('over'); return; }*/ //var img = window.webkitURL.createObjectURL(fileList[0]); //拖拉图片到浏览器,可以实现预览功能 xhr = new XMLHttpRequest(); xhr.open("post", "/upload", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('files', fileList[0]); xhr.send(fd); }, false); }); </script> </head> <body> <div id="target_box" class="dashboard_target_box"> <div id="drop_zone_home" class="dashboard_target_messages_container"> <p id="dtb-msg2" class="dashboard_target_box_message" style="top: -44px"> 选择你的图片<br> 开始上传 </p> <p id="dtb-msg1" class="dashboard_target_box_message" style="top: -44px"> 拖动图片到<br> 这里 </p> </div> </div> </body> </html>
springmvc上传的配置
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="5000000"></property> </bean>
控制类
@RequestMapping(value="/upload",method=RequestMethod.POST) public void upload(@RequestParam MultipartFile[] files, HttpServletRequest request){ for(MultipartFile file:files) { if(file.isEmpty()) continue; System.out.println(file.getContentType()+","+ file.getName()+","+file.getOriginalFilename()); } }
发表评论
-
知识点积累-前端
2013-12-20 17:41 01、alert函数属于JavaScript哪个对象上的?是wi ... -
html5-Web SQL Database 数据库
2013-01-17 14:45 1403转载自【http://www.656463.com/artic ... -
html5-Local Storage 本地存储
2013-01-17 11:24 1436转载自【http://www.656463.com/artic ... -
html5-地理位置定位 API 接口开发
2013-01-16 18:33 2811转载自【http://www.656463.com/artic ... -
html5-智能form表单新属性
2013-01-16 18:02 1268转载自【http://www.656463.com/artic ... -
html5-Canvas 画图标签、画线、圆、渐变色
2013-01-16 17:20 4305转载自【http://www.656463.c ... -
html5-视频播放事件属性与API控件
2013-01-16 16:52 0在过去,我们如果想在Web上播放视频,也是都是通过Flash来 ... -
html5-标签语法变化和使用概念
2013-01-16 16:15 920转载自【http://www.656463.com/artic ... -
图解HTTPS
2013-01-11 11:18 625转载自博客园文章: htt ... -
javascript中模拟类的私有,共有,静态属性
2013-01-10 15:39 695javascript中,每个function都拥有一个原型对象 ... -
javascript 面向对象,定义类
2013-01-10 11:16 623在javascript中定义类或对象有下面几种常用的方 ...
相关推荐
JavaEE企业级开发-----SpringMVC实现 文件的上传下载实验报告
基于java的开发源码-Java SpringMVC+HTML5飞翔的小鸟游戏微信小程序源码.zip 基于java的开发源码-Java SpringMVC+HTML5飞翔的小鸟游戏微信小程序源码.zip 基于java的开发源码-Java SpringMVC+HTML5飞翔的小鸟游戏...
本科毕设-课设-基于SpringMVC+MyBatis开发学生管理系统.zip本科毕设-课设-基于SpringMVC+MyBatis开发学生管理系统.zip本科毕设-课设-基于SpringMVC+MyBatis开发学生管理系统.zip本科毕设-课设-基于SpringMVC+MyBatis...
SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- Hello...
SpringMVC精品资源--基于springMVC实现的解决方案系统
微信 java weixin-java-tools-springmvc-master 微信 java weixin-java-tools-springmvc-master
Spring MVC学习(七)-------SpringMVC数据类型转换
SpringMVC精品资源--SpringMVC+Mybatis 脚手架
SpringMVC笔记内容:第...第二天(跳转方式(forward、redirect)、@ResponseBody、SpringMVC作用域传值的方式、文件上传、文件下载、跨服务器上传);第三天(SpringMVC异常处理、自定义拦截器、拦截器栈) --author:
SpringMVC精品资源--SpringMVC+Spring+MyBatis+Vue.js
SpringMVC精品资源--基于SpringMVC,Spring,MyBatis实现的秒杀系统(参见慕课网,做了些
SpringMVC精品资源--基于Springmvc+MyBatis+Spring+Bootstrap+EasyUI
一个springMVC的helloworld,
SpringMVC框架实现文件的上传和下载项目案例源码
SpringMVC笔记
基于springmvc实现文件上传下载 基于AOP的日志功能基于springmvc实现文件上传下载 基于AOP的日志功能基于springmvc实现文件上传下载 基于AOP的日志功能基于springmvc实现文件上传下载 基于AOP的日志功能基于...
swagger-springmvc-1.0.2/swagger-springmvc-1.0.2-javadoc/swagger-springmvc-1.0.2-sources
SpringMVC精品资源--使用SpringMVC+MyBatis+FreeMarker 创建简单的CMS内容发布系统
SpringMVC文件上传与下载的实现,包括UploadController和DownloadController
2023-04-13-框架技术-Springmvc进阶+文件上传.zip