HTML5文件拖动上传

步骤:

目标:拖动文件上传

开发工具: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

posted on 2015-10-24 22:07  _javachen  阅读(279)  评论(0编辑  收藏  举报

导航