html5分享--文件拖拽上传

发布：徐仁朝
html5 拖拽 文件上传

元素拖拽演示地址

一、原生拖放

html5提供直接拖放元素的api接口，拿来我们就可以使用，而不需要自己DIY很多代码，懒人的希望！

拖放事件

• 拖动某元素时，将依次触发下列事件：

  • dragstart 按下鼠标并开始移动时，在被拖动的元素上触发dragstart事件
  • drag 触发dragstart后，立即触发drag事件，拖动时持续触发
  • dragend 当拖动停止时，都会触发dragend，不管你把元素拖到哪了

• 当某个元素被拖到一个有效的位置目标上，依次触发下列事件：

  • dragenter 元素拖到目标位置上触发
  • dragover 元素拖动到目标范围内触发
  • dragleave/drop 元素放置到目标位置上，触发

二、可拖动

拖放是有条件的，并不是看到元素就能拖动，看下面标签设置：

//拖不动
<img src='123.png' alt='拖不动'>
//设置不可拖动
<img src='123.png' alt='拖不动' dragable="false">
//设置元素可拖动
<div dragable="true">

注：draggable属性是html5新增加的，它有三个值true,false,auto。 true是可以拖，false是不可拖放，auto由用户浏览器是否支持而定。
支持dragable属性的浏览器有IE10+、firefox4+、Safari5+和chrome。

三、拖动功能扩展---文件拖动上传

文件拖拽上传demo演示地址

• 功能介绍：

  • 文件大小限制
  • 文件预览
  • ajax上传
  • 自定义非图片文件预览
  • 自定义可拖拽的文件格式

• 用到的技术

  • html5原生拖拽
  • XMLHttpRequest

• 简单用法

<div id="file">将文件拖拽到此区域</div>
<div id="percent"><!--上传进度--></div>
<div id="preview"><!--文件预览--></div>

//实例化dragUpload，参数配置
new dragUpload({
    dom:"#file",
    maxSize:50*1024,//文件最大值
    preview:{//开启文件预览
        show:true,
        dom:'#preview'
    },
    style:'style',//自定义拖拽样式
    url:'file.php',
    type:'post',
    async:true,
    fileImage:{"pdf":'imgs/1.png',"xml":'imgs/2.png',"html":'imgs/3.png'},//对应文件预览图片
    fileType:["image/png","text/xml","application/pdf","text/html","image/svg+xml","image/jpeg","image/gif","image/bmp"]//文件类型
});