jquery uplodify多文件上传插件

来源：互联网发布：淘宝天天特价卡位现象编辑：程序博客网时间：2024/05/21 06:48

最近在项目中使用了jquery uplodify多文件上传插件进行了多图片异步上传，在此记录一下

前台jsp页面：

需要导入uplodify插件相应的js文件和css文件

<link rel="stylesheet" href="js/uploadify/uploadify.css" type="text/css"></link><script charset="utf-8" src="js/uploadify/jquery-1.11.1.js"></script><script type="text/javascript" src="js/uploadify/jquery.uploadify.v2.1.4.js"></script>

jsp页面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML><html>  <head>    <base href="<%=basePath%>">    <link rel="stylesheet" href="js/uploadify/uploadify.css" type="text/css"></link><script charset="utf-8" src="js/uploadify/jquery-1.11.1.js"></script>        <script type="text/javascript" src="js/uploadify/jquery.uploadify.v2.1.4.js"></script><script type="text/javascript">  $(function(){//图片上传$("#uploadify").uploadify({                           'uploader'       : 'js/common/uploadify.swf', //是组件自带的flash，用于打开选取本地文件的按钮                            'script'         : 'sys/upload_albumImg.action;jsessionid=<%=session.getId()%>',//处理上传的路径URL(处理firefox兼容问题加上sessionid)                           'cancelImg'      : 'images/other/uploadify-cancel.png',//取消上传文件的按钮图片，就是个叉叉                           'folder'         : 'attachments',//上传文件的目录                           'fileDataName'   : 'fileupload',//和input的name属性值保持一致就好                           'queueID'        : 'fileQueue',                           'queueSizeLimit' : 1, //限制在一次队列中的次数（可选定几个文件）。默认值= 999                            //'simUploadLimit' : 1,//多文件上传时，同时上传文件数目限制(一次可传几个文件)。默认值1                            'auto'           : false,//是否选取文件后自动上传                            'multi'          : true,//是否支持多文件上传                                   'sizeLimit'      : 20480,//限制上传文件的大小                            'buttonText'     : 'Browse',//按钮上的文字                            'method'         : 'POST',                              'displayData'    : 'percentage',//有speed和percentage两种，一个显示速度，一个显示完成百分比                             'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的                             'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式                            'onComplete'     : function (event, queueID, fileObj, result, data){                var index = result.indexOf(":");if(-1 != index){var fileName = result.substring(0,result.indexOf(":"));         $("#result").append('<li><font color="blue">'+fileName+'</font></li>');                                 var urlPic = result.substring(result.indexOf(":")+1);                var url = $("#picsUrl").val();                var allUrl = '';                if(!isEmpty(url)){                allUrl = url+","+urlPic;                } else {                allUrl = urlPic;                }                $("#picsUrl").val(allUrl);} else {       $("#result").html(result);}         },                               'onError'        : function(event, queueID, fileObj,errorObj){                 $("#result").html(errorObj.type + "Error:" + errorObj.info);          }                  });});    //图片上传     function showResult(){//删除显示的上传成功结果        $("#result").html("");    }     function uploadFile(){//上传文件         $('#uploadify').uploadifyUpload();    }    function clearFile(){//清空所有上传队列         $('#uploadify').uploadifyClearQueue();     }    function cleanResult(){        $("#result").html("");     }  </script>  </head>    <body>   <div class="all">   <div class="content"><table class="addAlbumTable"> <tr><td >上传图片：</td> <td><div id="fileQueue"></div><input type="file" id="uploadify" name="fileupload" required="required" /><br><ul id="result"></ul><input type="hidden" name="image" id="picsUrl"><br><!--显示结果--><p><a href="javascript:uploadFile()">开始上传</a>    <a href="javascript:clearFile()">取消所有上传</a></p></td></tr></table></div>   </div>  </body></html>

后台使用的Struts2的Action进行处理（后台使用了commons-fileupload-1.3.1.jar和commons-io-2.2.jar）

import java.io.File;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.io.FileUtils;import org.apache.struts2.ServletActionContext;import com.johnf.app.music.util.Constants;import com.johnf.app.music.util.DateTools;import com.johnf.app.music.util.PropertiesUtil;import com.johnf.app.music.util.StringTools;import com.johnf.app.music.vo.UserVo;import com.opensymphony.xwork2.ActionSupport; /** * jquery ajax批量上传文件Action */public class UploadifyAction extends ActionSupport{private static final long serialVersionUID = 2484696021315216621L;private File fileupload;private String fileuploadFileName;/** * 上传专辑图片 * @return */public String uploadAlbumImages() {try {HttpServletRequest  request = getHttpRequest();HttpServletResponse response  = getHttpResponse();request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");if(null != this.getFileupload()){String fileName = "";if(!StringTools.isEmptyOrNull(getFileuploadFileName())){int index = getFileuploadFileName().lastIndexOf(".");fileName = DateTools.getCurrentDate("yyyyMMddHHmmssSSS")+getFileuploadFileName().substring(index);String dir = PropertiesUtil.readValue(Constants.UPOAD_DIR) + PropertiesUtil.readValue(Constants.ALBUM_LOGO_DIR);String filePath = ServletActionContext.getServletContext().getRealPath(dir);File savedir = new File(filePath);if (!savedir.exists())savedir.mkdirs();File savefile = new File(savedir, fileName);FileUtils.copyFile(getFileupload(), savefile);// 向页面端返回结果信息response.getWriter().write(getFileuploadFileName()+"上传成功！:"+ (dir + fileName));response.getWriter().close(); }}} catch (Exception e) {e.printStackTrace();return "exceptions";}        return null;}public File getFileupload() {return fileupload;}public void setFileupload(File fileupload) {this.fileupload = fileupload;}public String getFileuploadFileName() {return fileuploadFileName;}public void setFileuploadFileName(String fileuploadFileName) {this.fileuploadFileName = fileuploadFileName;}}

0 0