`
wen866595
  • 浏览: 268009 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

html5 文件拖拽上传

 
阅读更多

 

本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266

 

html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网上找来改的,只是踩了几个坑之后就想把过程记录下来。

 

功能实现

下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现。 首先会介绍一些必须的基础。

 

拖拽事件

拖拽事件有下面这些:

  • dragstart:当用户开始拖动对象时触发。

  • dragenter: 当鼠标第一次经过目标元素,且有拖动发生时触发。此事件的监听者应指明在这个位置上是否允许drop,或者监听者不执行任何操作,那么drop默认是不允许的。

  • dragover:当鼠标经过一个元素时,且有拖动发生时触发 。

  • dragleave:当鼠标离开一个元素,且有拖动在发生时触发。

  • drag: 当对象被拖动,每次移动鼠标时触发。

  • drop:在drag操作的最后发生drop时,在元素上触发此事件。监听者应该负责检索拖动的数据,并插入drop的位置。

  • dragend: 在拖动对象时放开鼠标按键时触发。

从浏览器外拖拽文件到浏览器时,必须要绑定的事件有 dragoverdrop,其他的都可以不绑定。dragoverdrop 事件的处理函数内必须调用事件的 preventDefault() 函数,要不然浏览器会进行默认处理,比如文本类型的文件直接打开,非文本的可能弹出一个下载文件框。

 

DataTransfer对象

拖拽对象用来传递数据的媒介,通过拖拽事件的 event.dataTransfer 获取。

  • dataTransfer.dropEffect [ = value ]:返回当前选择的操作类型,可以设置新的值来修改已选择的操作。可选的值有: none, copy, link, move

  • dataTransfer.effectAllowed [ = value ]:返回允许的操作类型,可修改。可选的值有:none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized

  • dataTransfer.types:返回一个DOMString,列出在dragstart事件里设置的所有格式。另外,如果有文件被拖动,那么其中一个类型的字符串将是“Files”。

  • dataTransfer.clearData( [ format ] ):移除指定格式的数据。如果忽略参数则移除所有数据。

  • dataTransfer.setData(format, data):添加指定的数据。

  • data = dataTransfer.getData(format):返回指定的数据。如果没有这样的数据,则返回空字符串。

  • dataTransfer.files:返回被拖拽的FileList,如果有。

  • dataTransfer.setDragImage(element, x, y):用指定的元素来更新drag反馈,替换之前指定的反馈(feedback)。

  • dataTransfer.addElement(element):添加指定元素到用于渲染drag反馈的元素列表。

在这个用例里,最重要的就是 dataTransfer.files 属性,它是用户拖拽进浏览器的文件列表,是个 FileList 对象,有 length 属性,可以通过下标访问。

 

FormData

FormData 代表一个表单,可以通过 append('fieldName', value) 函数往表单里添加参数,参数的只不仅可以是字符串,还可以是File对象,甚至二进制数据。

 

XMLHttpRequest level 2

新版本的XMLHttpRequest对象,这里说的XMLHttpRequest都是指新版的。

XMLHttpRequest可以向不同域名的服务器发出HTTP请求。这叫做 “跨域资源共享”(Cross-origin resource sharing,简称CORS)。

 

浏览器有个著名的同源策略,这里浏览器安全的基础,CORS 除了需要浏览器支持外,还要服务器同意。

XMLHttpRequest 支持直接发送FormData,就像浏览器进行表单提交一样。

 

XMLHttpRequest 还支持进度信息(progress事件),进度分为上传进度和下载进度,上传进度的事件是在 XMLHttpRequest.upload 对象上,下载进度的事件是在 XMLHttpRequest 对象。每个进度事件都有三个属性:

  • lengthComputable:可计算的已上传字节 数
  • total:总的字节 数
  • loaded:到目前为止上传的字节 数

除了进度事件,还支持下面五个事件:

  • load事件:传输成功完成。
  • abort事件:传输被用户取消。
  • error事件:传输中出现错误。
  • loadstart事件:传输开始。
  • loadend事件:传输结束,但是不知道成功还是失败。

progress事件一样,属于上传操作的事件处理函数绑定在XMLHttpRequest.upload对象上,属性下载的直接绑定在 XMLHttpRequest 对象。

 

具体代码

本机测试时要注意把下面代码里的路径改为自己本机的。

 

服务器端

服务器端需要写个Servlet来接收上传的表单。 /html5/FileUploadServlet

用servlet3的 @MultipartConfig 注解就可以很快实现。

 

客户端代码


<html>
<head>
<title> drag drop upload demo
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
       <div id= "progressBarZone">请将文件拖拽进浏览器内! <br/></ div>
</body>

<script>
var progressBarZone = document.getElementById('progressBarZone');

function sendFile(files) {
       if (!files || files.length < 1) {
             return;
      }
      
       var percent = document.createElement('div' );
      progressBarZone.appendChild(percent);

       var formData = new FormData();             // 创建一个表单对象FormData
      formData.append( 'submit', '中文' );  // 往表单对象添加文本字段
      
       var fileNames = '' ;
      
       for ( var i = 0; i < files.length; i++) {
             var file = files[i];    // file 对象有 name, size 属性
            
            formData.append( 'file[' + i + ']' , file);       // 往FormData对象添加File对象
            
            fileNames += '《' + file.name + '》, ' ;
      }
      
       var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener( 'progress',
             function uploadProgress(evt) {
                   // evt 有三个属性:
                   // lengthComputable – 可计算的已上传字节数
                   // total – 总的字节数
                   // loaded – 到目前为止上传的字节数
                   if (evt.lengthComputable) {
                        percent.innerHTML = fileNames + ' upload percent :' + Math.round((evt.loaded / evt.total)  * 100) + '%
' ;
                  }
            }, false); // false表示在事件冒泡阶段处理

      xhr.upload.onload = function() {
            percent.innerHTML = fileNames + '上传完成。

' ;
      };

      xhr.upload.onerror = function(e) {
            percent.innerHTML = fileNames + ' 上传失败。

' ;
      };

      xhr.open( 'post', 'http://cross.site.com:8080/html5/FileUploadServlet' , true);
      xhr.send(formData);            // 发送表单对象。
}

document.addEventListener("dragover", function(e) {
      e.stopPropagation();
      e.preventDefault();            // 必须调用。否则浏览器会进行默认处理,比如文本类型的文件直接打开,非文本的可能弹出一个下载文件框。
}, false);

document.addEventListener("drop", function(e) {
      e.stopPropagation();
      e.preventDefault();            // 必须调用。否则浏览器会进行默认处理,比如文本类型的文件直接打开,非文本的可能弹出一个下载文件框。

      sendFile(e.dataTransfer.files);
}, false);
</script>
</html>

 

如果上面的代码都部署在同一个网站下,那是没有问题的。可是我要做的上传操作是要把文件传到另一个网站上,坑也就产生了。

 

由于一般情况下都不需要跨站点上传文件,所以跨域有关的就不贴这里了,有兴趣的看以看完整的文章: http://coderbee.net/index.php/web/20130703/266

 

 

欢迎关注我的微信公众号: coderbee笔记

2
1
分享到:
评论

相关推荐

    基于bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip

    标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件,并且在上传前可以...

    html5拖拽上传文件

    HTML5拖拽上传文件是现代Web开发中的一个显著特性,它极大地提升了用户在网页上的交互体验。这个功能允许用户直接从他们的计算机上通过鼠标拖放操作将文件上传到网站,而无需传统意义上的“浏览文件”按钮。这项技术...

    html5文件上传插件

    5. **拖放功能**:HTML5支持文件拖放操作,用户可以直接从桌面或文件夹拖动文件到网页指定区域进行上传。 6. **跨域上传**:通过设置CORS(Cross-Origin Resource Sharing)策略,可以实现跨域文件上传。 ...

    html5 boostrap可拖动批量文件上传插件效果

    在本项目中,我们关注的是一个基于HTML5和Bootstrap的可拖动批量文件上传插件,它提供了便捷的文件上传体验。下面将详细探讨相关知识点。 1. **HTML5 File API**: HTML5引入了File API,允许开发者直接操作浏览器中...

    HTML5多文件上传批量上传

    这是一个基于Spring MVC和HTML5的多文件上传的实例,前端实现全部采用JavaScript完成,有进度条显示,同时有上传状态。后台由一个文件上传的Controller控制,非常方便。对不想使用插件上传的人,可以看看这个参考。

    html5拖拽上传.

    ### HTML5 拖拽上传实现详解 #### 一、引言 随着HTML5的普及与浏览器技术的进步,用户界面的交互方式变得越来越多样化。其中,“拖拽上传”功能就是一个非常实用且广受欢迎的例子。从Gmail的附件拖拽上传到网易...

    HTML5 CSS3 :无插件拖拽上传图片实例源码

    在这个"HTML5 CSS3:无插件拖拽上传图片实例源码"中,我们重点关注的是利用HTML5的拖放(Drag and Drop)API以及File API来实现图片的无插件上传功能。这种技术使得用户可以通过直接在页面上拖动文件到指定区域,...

    ajax文件上传插件,支持拖拽

    拖放(Drag and Drop)功能是HTML5引入的一项新特性,使得用户可以方便地通过拖动文件到指定区域进行上传。这个插件利用了`drag`和`drop`事件监听器,当用户拖放文件到指定元素时,捕获这些事件并执行上传操作。 3...

    jQuery文件上传插件(支持拖动上传)

    拖动上传是jQuery文件上传插件的一个亮点功能。在HTML5中,拖放API(Drag and Drop API)被引入,允许用户直接在页面上拖动元素,包括文件。这个插件充分利用这一特性,使得用户可以通过在支持的浏览器中拖拽文件到...

    HTML5.zip_html5 拖拽_拖拽上传

    在HTML5中,拖拽API(Drag and Drop API)是一个显著的特性,它使得用户可以通过简单的拖放操作在网页上进行交互,比如文件上传。 拖拽上传是一种在网页上实现文件上传的独特方式,它允许用户直接从本地文件系统...

    JQ实现拖拽上传并显示

    以上代码展示了如何使用jQuery实现HTML5拖拽上传功能,包括拖放事件处理、文件读取、Ajax上传和进度显示。在实际应用中,你可能还需要添加错误处理、多文件上传支持、文件类型验证等功能,以增强用户体验和安全性。 ...

    jq+layui 实现图片拖拽上传功能

    请注意,这只是一个基础的拖拽上传实现,实际应用中可能还需要处理上传到服务器、进度显示、多文件上传等更复杂的需求。在实际开发中,你可能需要结合后端接口,使用Ajax或Fetch API将图片数据发送到服务器进行存储...

    支持拖拽的文件上传

    总之,支持拖拽的文件上传是提升用户交互体验的重要手段,通过HTML5的File API和Drag and Drop API,开发者可以构建出直观且高效的文件上传功能。不过,实现时需要注意浏览器兼容性以及安全性的考量。对于源码和工具...

    文件图标化展示拖拽上传.zip

    HTML5引入了拖放API(Drag and Drop API),允许用户通过拖动元素(如文件)到指定区域进行上传。在HTML5中,主要使用`dragstart`、`dragenter`、`dragover`、`drop`等事件来监听并处理拖放操作。为了实现文件上传,...

    Ext相册实现文件拖拽,实时上传进度,本地预览

    本教程将详细讲解如何利用EXT4、HTML5以及Servlet或Struts2技术栈来实现一个功能强大的相册系统,其中包括文件拖拽上传、实时上传进度显示以及本地预览功能。 **EXT4组件库** EXT4是一个JavaScript框架,用于构建富...

    html5文件上传插件Pure HTML5 file upload

    5. **拖放上传**:HTML5的`drag and drop`API使得用户可以直接从桌面或其他网页拖动文件到指定区域进行上传。 6. **错误处理**:插件通常会提供错误处理机制,如文件类型限制、大小限制等,以确保上传的合法性。 ...

    PHP+Html+Js拖动上传资源

    点击上传是用户通过浏览器上的文件选择对话框来选择本地文件,而拖动上传则是允许用户直接从桌面或文件管理器中拖拽文件到网页指定区域进行上传。这种方式提供了更加直观和便捷的用户体验。 1. **点击上传**: - ...

    html5文件上传器演示

    支持文件拖拽上传,直接将文件拖拽到页面元素上方即可自动上传(默认元素是body);服务端采用asp.net 4.0程序开发,包含有处理程序,提供程序和视图控件,当然也可以用java或者php实现服务端程序。 浏览器兼容:IE10...

    html5文件上传中文文档

    在探讨HTML5文件上传中文文档时,我们将重点介绍HTML5提供的文件操作API,这是一个强大的功能集合,使得在浏览器端操作文件变得更加方便和安全。文档中提到了几个关键的概念和API,包括File API、FileReader API、...

Global site tag (gtag.js) - Google Analytics