首页 > Web开发 > 详细

HTML5文件拖动上传

时间:2015-10-24 23:30:35      阅读:367      评论:0      收藏:0      [点我收藏+]

步骤:

目标:拖动文件上传

开发工具:myeclipse2014+jdk1.6
文件上传需要一个第三方的文件上传jar:common-fileupload.jar

1.新建一个项目webproject--项目名称myupload
2.新建一个类:文件上传的类TmFileUpload.java
3.新建一个页面:upload.jsp
4.通过XMLHttpRequest进行异步文件上传
5.查漏补缺,优化,整理代码,规范代码


1.文件上传HTML5
知识点:drag把文件拖拽到浏览器的默认行为覆盖
2.通过HTML5拖拽时间,ondrop,然后通过拖动区域监听浏览器的drop时间达到文件上传的目的
3:从时间中event中获取拖拽到;浏览器的文件信息
4.通过XMLHttpRequest文件上传到服务器
5.通过HTML5 FormData动态设置表单元素
6.获取服务器上传的文件信息
7.编写data.jsp上传页面


data.jsp:
1.文件上传:必须要依赖一个jar包apache-common-fileupload.jar
2.创建上传目录存放客户端传递过来的文件 - upload
3.从request对象过去我们ajax传输的文件信息
4.将客户端传过来的文件上传到服务器upload目录下
a:一定要对文件的名称进行重命名,浏览器不支持中文

效果图:

技术分享
技术分享
案例下载:http://pan.baidu.com/s/1jGLCTIu

HTML5文件拖动上传

原文:http://www.cnblogs.com/javachenshome/p/4907819.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!