转载自【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
//要想实现拖拽，首页需要阻止浏览器默认行为，一共四个事件。
$(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());
}
}
分享到：
相关推荐
本实验报告将详细阐述如何利用SpringMVC实现文件上传与下载的功能。 首先，文件上传的核心在于HTML表单（form）的正确配置。在创建用于上传文件的表单时，需要指定`enctype`属性为`multipart/form-data`。这是因为...
基于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...
微信 java weixin-java-tools-springmvc-master 微信 java weixin-java-tools-springmvc-master
5. **运行与调试**： - 在IDE中运行项目，启动服务器。 - 浏览器访问`http://localhost:8080/helloSpringMvc/hello`，如果配置正确，应看到"Hello World!"的输出。 通过这个"helloworld------springMVC"项目，你...
7. **AJAX支持**：SpringMVC可以方便地与AJAX技术结合，实现页面的异步更新。 8. **MVC注解**：@RequestMapping、@Controller、@Service、@Autowired等注解简化了代码，提高了可读性和可维护性。 9. **拦截器**：...
- 文件上传与下载功能，支持大文件和断点续传。 - 异常处理机制，可自定义全局和局部异常处理器。 - 自定义拦截器，实现预处理、后处理和链式拦截。 通过深入学习和实践 SpringMVC，开发者可以构建高效、可维护...
例如，SpringMVC可以与RESTful API设计相结合，实现前后端分离；Mybatis则可以配合Mybatis-Plus扩展，进一步简化CRUD操作。通过深入学习和理解这两个框架，开发者不仅可以提高开发效率，还能更好地应对复杂的企业级...
在SpringMVC框架中，实现文件的上传与下载是常见的需求。IntelliJ IDEA作为流行的Java开发集成环境，为开发者提供了高效便捷的开发体验。在这个项目中，我们使用IDEA来构建一个基于SpringMVC的系统，实现了文件的...
在本教程中，我们将深入探讨如何使用SpringMvc框架来实现CRUD（创建、读取、更新和删除）操作。SpringMvc是Spring框架的一部分，专为Web应用提供了模型-视图-控制器（MVC）架构模式的实现。SSM是Spring、SpringMVC和...
在本教程中，我们将探讨如何结合`SpringMVC`和`Ajax`来实现异步文件上传，并讨论短视频背景以及`a`标签绑定文件域的相关知识。 1. **SpringMVC中的文件上传** - **MultipartFile接口**：`SpringMVC`提供了一个名为...
在实际应用中，我们还需要结合前端技术（如HTML5的`<input type="file">`，Ajax异步提交等）以及安全策略来实现完整的文件管理功能。理解并熟练掌握这些技巧，将有助于构建更高效、更安全的Web应用程序。
SpringMVC笔记
在开始实现文件上传功能之前，我们需要做一些准备工作，包括添加必要的依赖、配置文件上传解析器等。 ##### 1. 添加依赖 为了支持文件上传，首先需要在项目的构建文件（如`pom.xml`或`build.gradle`）中添加`...
基于springmvc实现文件上传下载 基于AOP的日志功能基于springmvc实现文件上传下载 基于AOP的日志功能基于springmvc实现文件上传下载 基于AOP的日志功能基于springmvc实现文件上传下载 基于AOP的日志功能基于...
在这个“SpringMVC文件上传，多文件上传实例”中，我们将深入探讨如何在SpringMVC环境中实现文件上传功能，包括单个文件上传以及多个文件的批量上传。 1. **文件上传原理**： 文件上传是通过HTTP协议的POST请求来...
在线投票系统-jsp+springMVC+mybatis在线投票系统-jsp+springMVC+mybatis在线投票系统-jsp+springMVC+mybatis在线投票...jsp+springMVC+mybatis在线投票系统-jsp+springMVC+mybatis在线投票系统-jsp+springMVC+mybatis
springMvc 文件上传，springMvc 支持单文件和多文件上传，
在本项目中，我们主要探讨的是如何利用WebUploader插件结合SpringMVC框架来实现大文件及多文件的上传功能。这是一个常见的需求，特别是在需要用户提交大量数据或媒体内容的Web应用中。以下是对相关知识点的详细说明...