uploadify3.1使用方法
3.1版本相对于之前的版本在方法名上做了相应的修改，比如：
| 2.X |
3.1 |
| 'uploader': 'uploadify.swf',
|
'swf': 'uploadify-v3.1/uploadify.swf',
|
| 'script':'servlet/upload',
|
'uploader':'servlet/upload', |
| 'cancelImg': 'jquery/cancel.png', |
cancelImage直接修改uploadify.css中的.uploadify-queue-item .cancel |
| 'fileExt': '*.jpg;*.gif', |
'fileTypeExts':‘*.jpg;*.gif', |
| 'fileDesc': '支持格式:jpg/gif.',
|
'fileTypeDesc': '支持格式:jpg/gif' |
| 上传成功触发：onComplete |
上传成功触发：onUploadSuccess |
| 开始上传的触发事件 <a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a> |
开始上传的触发事件 <a href="javascript:jQuery('#uploadify').uploadify('upload','*')">开始上传</a> |
需要以下几个jar包
·commons-fileupload-1.2.jar
·commons-io-1.4.jar
·commons-logging.jar
uploadify可在官方下载最新版 http://www.uploadify.com/
目录：
index.jsp代码
- <%@ page language="java" contentType="text/html; charset=gbk"%>
-
-
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme() + "://"
- + request.getServerName() + ":" + request.getServerPort()
- + path + "/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>Upload</title>
-
-
- <!--装载文件-->
- <link href="uploadify-v3.1/uploadify.css" type="text/css"
- rel="stylesheet" />
- <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
- <script type="text/javascript"
- src="uploadify-v3.1/jquery.uploadify-3.1.js"></script>
- <script type="text/javascript" src="js/swfobject.js"></script>
-
-
-
-
- <!--ready事件-->
- <script type="text/javascript">
- $(document).ready(function () {
- $("#uploadify").uploadify({
- 'swf': 'uploadify-v3.1/uploadify.swf',
- 'uploader':'servlet/upload',
- //'script':'upload!doUpload.action?name=yangxiang',
- //'script': 'servlet/Upload?name=yangxiang',
- //'cancel' : 'uploadify/uploadify-cancel.png',
- 'queueID' : 'fileQueue', //和存放队列的DIV的id一致
- //'fileDataName': 'fileupload', //必须，和以下input的name属性一致
- 'auto' : false, //是否自动开始
- 'multi': true, //是否支持多文件上传
- 'buttonText': 'BROWSE', //按钮上的文字
- 'simUploadLimit' : 1, //一次同步上传的文件数目
- //'sizeLimit': 19871202, //设置单个文件大小限制，单位为byte
- 'fileSizeLimit' : '6000KB',
- 'queueSizeLimit' : 10, //队列中同时存在的文件个数限制
- 'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
- 'fileTypeDesc': '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
- 'onUploadSuccess': function ( fileObj, response, data) {
- alert("文件:" + fileObj.name + "上传成功");
- },
- 'onUploadError': function(event, queueID, fileObj) {
- alert("文件:" + fileObj.name + "上传失败");
- },
- 'onCancel': function(event, queueID, fileObj){
- alert("取消了" + fileObj.name);
- }
- });
-
- });
- </script>
- </head>
-
- <body>
- <div id="fileQueue" style="width: 30%"></div>
- <input type="file" name="uploadify" id="uploadify" />
- <p>
-
-
- <a href="javascript:jQuery('#uploadify').uploadify('upload','*')">开始上传</a>
-
-
- <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
- </p>
- </body>
-
- </html>
后台代码
- /**
- * get及post提交方式
- *
- * @param request
- * @param response
- * @throws ServletException
- * @throws IOException
- */
- public void doGetAndPost(HttpServletRequest request,
- HttpServletResponse response) throws ServletException, IOException {
- request.setCharacterEncoding("GBK");
- // 文件存放的目录
- //C:\\Documents and Settings\\jnzbht\\Workspaces\\MyEclipse 8.5\\upload\\WebRoot\\upload\\
- File tempDirPath = new File(request.getSession().getServletContext()
- .getRealPath("/")
- + "\\upload\\");
- if (!tempDirPath.exists()) {
- tempDirPath.mkdirs();
- }
-
-
- // 创建磁盘文件工厂
- DiskFileItemFactory fac = new DiskFileItemFactory();
- // 创建servlet文件上传组件
- ServletFileUpload upload = new ServletFileUpload(fac);
- //使用utf-8的编码格式处理数据
- upload.setHeaderEncoding("utf-8");
- // 文件列表
- List fileList = null;
- // 解析request从而得到前台传过来的文件
- try {
- fileList = upload.parseRequest(request);
- } catch (FileUploadException ex) {
- ex.printStackTrace();
- return;
- }
- // 保存后的文件名
- String imageName = null;
- // 便利从前台得到的文件列表
- Iterator<FileItem> it = fileList.iterator();
- while (it.hasNext()) {
- FileItem item = it.next();
- // 如果不是普通表单域，当做文件域来处理
- if (!item.isFormField()) {
- //生成四位随机数
- Random r = new Random();
- int rannum = (int) (r.nextDouble() * (9999 - 1000 + 1)) + 1000;
- imageName = DateUtil.getNowStrDate() + rannum
- + item.getName();
-
-
- BufferedInputStream in = new BufferedInputStream(item
- .getInputStream());
- BufferedOutputStream out = new BufferedOutputStream(
- new FileOutputStream(new File(tempDirPath + "\\"
- + imageName)));
- Streams.copy(in, out, true);
-
-
- }
- }
- //
- PrintWriter out = null;
- try {
- out = encodehead(request, response);
- } catch (IOException e) {
- e.printStackTrace();
- }
- // 这个地方不能少，否则前台得不到上传的结果
- out.write("1");
- out.close();
- }
-
-
- /**
- * Ajax辅助方法 获取 PrintWriter
- *
- * @return
- * @throws IOException
- * @throws IOException
- * request.setCharacterEncoding("utf-8");
- * response.setContentType("text/html; charset=utf-8");
- */
- private PrintWriter encodehead(HttpServletRequest request,
- HttpServletResponse response) throws IOException {
- request.setCharacterEncoding("utf-8");
- response.setContentType("text/html; charset=utf-8");
- return response.getWriter();
- }
在doPost中调用即可
Web.xml中
- <?xml version="1.0" encoding="UTF-8"?>
- <web-app version="2.5"
- xmlns="http://java.sun.com/xml/ns/javaee"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
- http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
- <servlet>
- <description>This is the description of my J2EE component</description>
- <display-name>This is the display name of my J2EE component</display-name>
- <servlet-name>upload</servlet-name>
- <servlet-class>com.lis.upload.upload</servlet-class>
- </servlet>
-
-
- <servlet-mapping>
- <servlet-name>upload</servlet-name>
- <url-pattern>/servlet/upload</url-pattern>
- </servlet-mapping>
- <welcome-file-list>
- <welcome-file>index.jsp</welcome-file>
- </welcome-file-list>
- </web-app>
我已经将示例上传到csdn、51CTO上了
欢迎大家下载指正
51CTO下载地址： http://down.51cto.com/data/468185
CSDN下载地址： http://download.csdn.net/detail/xingfudehunpo/4475936