炫酷的文件上传效果.docx

1、文件上传基础 1）浏览器页面：?form action=${pageContext.request.contextPath }/UploadServlet method=POST enctype=multipart/form-data 选择文件：input type=file name=name/br/ 文件信息：input type=text name=info/ input type=submit value=提交/ /form 2）服务器Servlet端： 使用Apache提供的和文件上传有关的两个jar包：common-fileupload-1.3.1.jar和common-io-2.2.jar。注意后面那个包的版本一定要=2。 代码：public class UploadServlet extends HttpServlet {?private String serverPath = e:/uploader/; public void doGet(HttpServletRequest request, HttpServletResponse response)?}?public void doPost(HttpServletRequest request, HttpServletResponse response)?}?}2、使用WebUploader上传组件 baidu开发的开源组件WebUploader，可以实现异步上传文件、拖拽式上传、黏贴上传、上传进度监控、文件缩略图、大文件的断点续传、大文件秒传、 2.1 下载WebUpload组件 到WebUploader官网下载，? 2.2基本文件上传Demo（包含上传进度） 前端： 1）在页面导入所需css、js!-- 1.准备好webuploader的资源 --link rel=stylesheet type=text/css href=${pageContext.request.contextPath }/jx/webuploader.cssscript type=text/javascript src=${pageContext.request.contextPath }/jx/jquery.js/scriptscript type=text/javascript src=${pageContext.request.contextPath }/jx/webuploader.js/script 2）编写html!-- 2.设计一个页面元素 -- div id=uploader /div 3）对上传组件进行渲染 !-- 3.使用webuploader进行渲染 -- script type=text/javascript /script 服务器端仍使用之前的UploadServlet。 2.3生成缩略图（在2.2的基础上，上传图片） 只需要在3.2步骤做相应修改即可?//3.2选择文件，并且提示文件的功能 ?2.4拖拽+黏贴 1）拖拽+黏贴（火狐不支持） 增加拖拽区域并添加样式：style type=text/css /style?!-- 该元素用于拖拽文件 --div id=dndArea/div 修改3.1步骤的功能开关部分：//3.1 WebUpload组件初始化，以及配置全局参数 2.5断点续传 1）前台：!DOCTYPEhtml head base href=%=basePath% titlewebuploader组件上传/title meta http-equiv=pragma content=no-cachemeta http-equiv=cache-control content=no-cachemeta http-equiv=expires content=0 meta http-equiv=keywords content=keyword1,keyword2,keyword3meta http-equiv=description content=This is my page!-- 1.准备好webuploader的资源 --link rel=stylesheet type=text/css href=${pageContext.request.contextPath }/jx/webuploader.css style type=text/css /style /head body !-- 2.设计一个页面元素 -- div id=uploader /div script type=t