使用uploadify来实现文件上传能够客户端判断文件大小、控制文件上传的类型、实现多文件上传、显示进度条等功能，方便易用，兼容性较好。
本例是把dwz中整合uploadify功能抽取出来的，可以进行单独使用，不一定要遭dwz中才能使用，本例只是为了测试，所以使用静态页面进行测试：
话不多说，代码敬上：
2，html页面的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="https://www.jb51.net/resources/dwz/uploadify/css/uploadify.css" type="text/css" media="screen" /> <script src="https://www.jb51.net/resources/dwz/js/jquery-1.7.2.js" type="text/javascript"></script> <script src="https://www.jb51.net/resources/dwz/uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script> <script src="https://www.jb51.net/resources/dwz/uploadify/scripts/errorCode.js" type="text/javascript"></script> <!--<link type="text/css" href="https://www.jb51.net/article/styles.css">--> <style type="text/css" media="screen"> .my-uploadify-button { background: none; border: none; text-shadow: none; border-radius: 0; } .uploadify:hover .my-uploadify-button { background: none; border: none; } .fileQueue { width: 400px; height: 150px; overflow: auto; border: 1px solid #E5E5E5; margin-bottom: 10px; } </style> <script type="text/javascript"> $(function(){ $('#testFileInput').uploadify({ swf:'resources/dwz/uploadify/scripts/uploadify.swf', uploader:'servlet/uploadify.do',//上传的url formData:{PHPSESSID:'xxx', ajax:1}, buttonText:'请选择文件', fileSizeLimit:'200KB',//设置上传大小 fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;', fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',//允许的后缀 auto:true,//是否自动上传 multi:true, overrideEvents: ['onDialogClose', 'onUploadError', 'onSelectError' ],//重新错误信息的显示方法 onSelectError: uploadify_onSelectError, onUploadError: uploadify_onUploadError, onUploadSuccess: uploadify_onUploadSuccess }); $('#testFileInput2').uploadify({ swf:'resources/dwz/uploadify/scripts/uploadify.swf', uploader:'servlet/uploadify.do', formData:{PHPSESSID:'xxx', ajax:1}, queueID:'fileQueue', buttonImage:'resources/dwz/uploadify/img/add.jpg', buttonClass:'my-uploadify-button', width:102, auto:false, fileSizeLimit:'100KB', fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;', fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;', overrideEvents: [ 'onDialogClose','onUploadError', 'onSelectError' ], onSelectError: uploadify_onSelectError, onUploadError: uploadify_onUploadError, onUploadSuccess: uploadify_onUploadSuccess }); }); </script> </head> <body> <!-- 单文件上传 --> <input type="file" /> <div></div> <!-- 多文件上传 --> <input type="file" /> <div></div> <input type="image" src="https://www.jb51.net/resources/dwz/uploadify/img/upload.jpg" /> <input type="image" src="https://www.jb51.net/resources/dwz/uploadify/img/cancel.jpg" /> </body> </html>
3，上传的servlet代码
package uploadFile; import java.io.File; import java.io.IOException; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class UploadFile extends HttpServlet { @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { super.service(request, response); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //临时目录 String basePath = req.getServletContext().getRealPath("upload"); String tempDir = "temp"; File tempFile = new File(basePath + File.separator +tempDir); if (!tempFile.exists()) { tempFile.mkdir(); } DiskFileItemFactory dfc = new DiskFileItemFactory(); dfc.setSizeThreshold(1*1024*1024);//设置临界值 dfc.setRepository(tempFile);//设置临时上传目录 ServletFileUpload upload = new ServletFileUpload(dfc); upload.setHeaderEncoding("UTF-8");//设置编码 // 设置文件最大值,这里设置5Mb,5*1024*1024; upload.setSizeMax(5 * 1024 * 1024); try { List fileList = upload.parseRequest(req); Iterator<FileItem> iterator = fileList.iterator(); while (iterator.hasNext()) { FileItem item = iterator.next(); String fileName = item.getName();//得到文件名 if (fileName != null) { //System.out.println(fileName); //System.out.println(item.getSize()); File sourceFile = new File(basePath+File.separator+fileName); item.write(sourceFile); } } } catch (FileUploadException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } //resp.getWriter().print("上传成功！"); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doPost(req, resp); } }
4，web.xml配置