文件上传的后台实现servlet,添加了上传进度的实现:
public class UpLoadServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String msg = ""; response.setCharacterEncoding("gbk"); // 创建一个磁盘文件的工厂 FileItemFactory factory = new DiskFileItemFactory(); // 创建一个用于解析文件的文件上传处理类 ServletFileUpload upload = new ServletFileUpload(factory); //实现上传数据的百分比 //实现官方的ProgressListener接口,用于完成进度条的控制 class MyProgressListener implements ProgressListener { private HttpServletRequest request = null; MyProgressListener(HttpServletRequest request) { this.request = request; } public void update(long pBytesRead, long pContentLength, int pItems) { double percentage = ((double) pBytesRead / (double) pContentLength); //上传的进度保存到session,以便使用 request.getSession().setAttribute("uploadPercentage",percentage); } } upload.setProgressListener(new MyProgressListener(request)); try { // 解析表单数据,返回一个集合 List<FileItem> items = upload.parseRequest(request); for (FileItem item : items) { if (item.isFormField()) { // 判断一个表单元素是一个普通的元素 // 得到普通表单元素的name属性的值 String fieldName = item.getFieldName(); // 用指定的编码获得普通表单元素的提交值 String fieldValue = item.getString("gbk"); } else { // 判断一个表单元素是一个文件域元素 // 得到文件域提交的文件的带路径的名称 String fileName = item.getName(); // 获取文件不到路径的名称,作为上传后文件的名称 String fileUploadName = fileName.substring(fileName .lastIndexOf("\\") + 1); // 设置一个上传文件的保存路径 String fileUpLoadPath = request.getSession() .getServletContext().getRealPath("/fileuplad/"); File file = new File(fileUpLoadPath); if (!file.exists()) { file.mkdir(); } // 将文件写到指定的路径下 item.write(new File(fileUpLoadPath, fileUploadName)); msg = "文件上传成功,保存在" + fileUpLoadPath; System.out.println(msg); response.getWriter().write( "{success:true,msg:'" + msg + "'}"); } } } catch (Exception e) { e.printStackTrace(); } } }
前台使用了EXTJS:
Ext.onReady(function(){ new Ext.Window({ height:300, width:300, items:[{ xtype:"button", text:"upload", handler:function(){ ///这是我自己封装的一个插件、带进度条,带后台日志输出 var win=new Ext.wangbing.FileUpLoadProcessBar({ title:"上传文件", width:600, height:370, fileStyle:"color:#15428b;", textAreaStyle:"background:#ced9e7;color:green;", emptyText:"请选择要导入的文件...", fileButton:"浏览", buttons:[{ text:"上传", handler : function() { var timer=setInterval(function(){ Ext.Ajax.request({ url:"ProgressServlet", method:"post", success:function(response,options){ var obj = Ext.util.JSON.decode(response.responseText); if(obj.finished){ clearInterval(timer); win.getComponent(0).getComponent(2).updateProgress(1,obj.msg); }else{ ///win.getComponent(0).getComponent(2). win.getComponent(0).getComponent(2).updateProgress(obj.percentage,obj.percentage); } } }) },50) var form=win.getComponent(0).getForm(); if(form.isValid()){ form.doAction("submit",{ url:"UpLoadServlet", success:function(form,response){ var jsobj=eval("("+response.response.responseText+")"); ///alert(jsobj.msg); }, failure:function(form){ ///alert("Failure"); } }) } } },{ text:"取消", handler:function(){ win.close(); } }], buttonAlign:"center" }); win.show(); } }] }).show(); })
我自己封装的一个插件。。。详情查看图片附件!