html5-与Springmvc结合实现拖拽文件上传

转载自【http://www.656463.com/article/338】

关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送，但其实现在利用HTML5的功能实现，主要借助于新版支持的浏览器来实现，IE还是弱很多

拖拽上传应用主要使用了以下HTML5技术：

Drag&Drop：

HTML5基于拖拽的事件机制.

FileAPI：

可以很方便的让Web应用访问文件对象，FileAPI包括FileList、Blob、File、FileReader、URIscheme，本文主要讲解拖拽上传中用到的FileList和FileReader接口。

FormData：

FormData是基于XMLHttpRequestLevel2的新接口，可以方便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');
    }
});

获取文件数据HTML5FileAPI

FileAPI中的FileList接口,它主要通过两个途径获取本地文件列表：

一种是<inputtype="file">的表单形式，

一种是e.dataTransfer.files拖拽事件传递的文件信息

varfileList=e.dataTransfer.files;

使用files方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

varfileNum=fileList.length;

文件类型

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());
    }
}

html5-与Springmvc结合实现拖拽文件上传

相关推荐