html5 拖拽 上传 java_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:一定要对文件的名称进行重命名,浏览器不支持中文

效果图: