码迷,mamicode.com
首页 > Web开发 > 详细

HTML5开发 拖拽文件上传

时间:2015-01-22 00:17:29      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

Drag&Drop 拖拽功能的处理

技术分享
关于HTML5拖拽文件上传,其实国外已经有很多网站有这样的应用,最早推出拖拽上传应用的是 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 向后端发送文件数据了。

HTML5 Drag & 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‘);
    }
});

 

获取文件数据 HTML5 File API

 

File API 中的 FileList 接口,它主要通过两个途径获取本地文件列表:
一种是 < input type=“file”>的表单形式,
一种是 e.dataTransfer.files拖拽事件传递的文件信息


var fileList = e.dataTransfer.files;

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

var fileNum = fileList.length;

判断文件类型

fileList[0].type.indexOf (’image’);

 

FormData 模拟表单实现Ajax文件上传

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

 

演示地址:

点击上传:测试网站!!!
前端的代码如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.dashboard_target_box {
    width:500px;
    height:300px;
    border:3px dashed #F53708;
    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‘);
                alert("不是有效的图片文件!");
                return;
            }
            
            //var img = window.webkitURL.createObjectURL(fileList[0]);
            //拖拉图片到浏览器,可以实现预览功能
            
            xhr = new XMLHttpRequest();
            xhr.open("post", "html5.php", true);
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            
            var fd = new FormData();
            fd.append(‘ff‘, fileList[0]);

            xhr.send(fd);
            var picsize=fileList[0].size/1024;
            $("#Lists").html(‘<strong>‘ + fileList[0].name + ‘</strong>(‘ + (fileList[0].type || "n/a") + ‘) - ‘ + picsize.toFixed(2) +‘ KB <a href="pic/‘+fileList[0].name+‘" target="_blank">查看图片</a>‘);
                    
        },false);
    
});
</script>

<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>
    </p>
  </div>
  <div id="Lists"></div>
</div>

 

HTML5开发 拖拽文件上传

标签:

原文地址:http://www.cnblogs.com/klaus-guan/p/4240410.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!