Struts2结合Uploadify-2.1.4.js

前提概要:必须动态设置业务所需值,经测试---1.好像只能直接写入,不能用jsonString这种参数  2.uploadify的上传多文件时,每个文件都会请求一次Action。总之,不适合做多文件并且表单参数较多的结合提交。如果仅有一个文件上传和少量的表单参数则比较适合



uploadify.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

        <link   rel="stylesheet"  type="text/css" href="css/uploadify.css"/>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $("#cancelHref").hide();
           $("#uploadify").uploadify({
            //页面相关
               'uploader'       : 'uploadify.swf', //是组件自带的flash,用于打开选取本地文件的按钮 
               'cancelImg'      : 'images/cancel.png',//取消上传文件的按钮图片,就是个叉叉
               'queueID'        : 'fileQueue',//放置上传文件及上传进度的Html元素Id
               'buttonText'     : 'BROWSE',//按钮上的文字
                 //'buttonImg'  : 'images/myButton.jpg',  //解决中文按钮名的好方式
               
               //服务器脚本
               'script'         : '<%=basePath%>uploadAction',      //处理上传的路径,这里使用Struts2是XXX.action  
               //'scriptData'     : {'userid': '12345', 'username': 'Alex Nie'}, //需要初始化的数据向服务器端传递。 如果是填写的表单,必须动态设置业务所需值
               
               
               //控制开关
               'auto'           : false,//是否选取文件后自动上传
               'multi'          : true,//是否支持多文件上传
               'displayData'    : 'speed',//有speed和percentage两种,一个显示速度,一个显示完成百分比 
               'queueSizeLimit' : 3, //一次最多选择多少个文件上传
               'simUploadLimit' : 2, //允许同时上传的个数 默认值:1 。 
               //'sizeLimit'      : 2000*1024, // 单个文件的最大尺寸(字节为单位)


               //传递给服务器参数
               'fileDataName'   : 'uploadify',//和input的name属性值保持一致就好,Struts2就能处理了
               'folder'         : 'upload',   //上传文件的目录
               'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.doc',//允许的文件类型,在客户端约束用户的文件选择,并将作为'fileext'参数传递给服务器供校验用
               
               //其他
               //'fileDesc'       : '*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.doc',//显示在本地选择文件对话框的文件类型下拉框中。如果配置了以下的'fileExt'属性,那么这个属性是必须的。 
               'fileDesc'       : '请选择rar doc pdf文件',
               'onSelect': function(e, queueId, fileObj)//选择文件时触发,该函数有三个参数
               {
                  //alert( "唯一标识:" + queueId + "\r\n" +
                  //       "文件名:" + fileObj.name + "\r\n" +
                  //       "文件大小:" + fileObj.size + "\r\n" +
                  //       "创建时间:" + fileObj.creationDate + "\r\n" +
                  //       "最后修改时间:" + fileObj.modificationDate + "\r\n" +
                  //       "文件类型:" + fileObj.type
                  // );
                  $("#cancelHref").show();
               },
               'onComplete'     : function (event, queueID, fileObj, response, data){
              //当上传成功后执行触发
                  $("#result").html(response);//显示上传成功结果
                  setTimeout("cancelInfo('result')",5000);//5秒后删除显示的上传成功结果
               },
               'onAllComplete':function(event,data) {  
                       //当所有文件上传完成后的操作  
                       $("#cancelHref").hide();  
                       if(data.errors==0){  
                           $("#result").html("所有文件已上传成功(本次共上传"+data.filesUploaded+"个),上传总大小:"+data.allBytesLoaded+"字节,平均传输速度:"+data.speed+"KB/s");  
                       }else{  
                           $("#result").html("成功上传"+data.filesUploaded+"个文件,失败"+data.errors+"个,上传总大小:"+data.allBytesLoaded+"字节,平均传输速度:"+data.speed+"KB/s");  
                       }  
                       setTimeout("cancelInfo('result')",5000);//5秒后删除显示的上传成功结果
                   },  
               'onError': function(event, queueID, fileObj) {  
               //上传错误时触发
                   alert("文件:" + fileObj.name + "上传失败");  
               },
               'onCancel': function(event, queueID, fileObj,data){  
               //当取消某一个文件时触发
                   $("#message").html("<font color='red'>" +"您取消掉了" + fileObj.name+"文件的上传"+ "</color><br/>");
                   setTimeout("cancelInfo('message')",5000);//5秒后删除显示的上传成功结果
                   if (data.fileCount==0) { //data.fileCount:取消一个文件后,文件队列中剩余文件的个数。
                   $("#cancelHref").hide();  
}
                   cancelInfo('full');
               },
               'onOpen': function(event,ID,fileObj) {  
                       //当有文件正在上传时的操作  
                       $("#cancelHref").show(); 
                 },
                 'onQueueFull': function (event,queueSizeLimit) {  
                       //当添加待上传的文件数量达到设置的上限时的操作  
                       $("#full").append("<font color='red'>已经达到上传数量限制了,不能再添加了</color><br/>");  
                       return false;  
                   },
                   'onClearQueue': function(event, queueID, fileObj){  
                   //当清空上传队列时触发
                   $("#message").html("<font color='red'>" +"您清空了上传队列"+ "</color><br/>");
                   setTimeout("cancelInfo('message')",5000);//5秒后删除显示的上传成功结果
               }
           });
       });


  function cancelInfo(id){//删除显示的上传成功结果
        $("#" + id).html("");
    }
       function uploadFile(){//上传文件
//必须动态设置业务所需值,经测试---1.好像只能直接写入,不能用jsonString这种参数  2.uploadify的上传多文件时,每个文件都会请求一次Action。总之,不适合做多文件并且表单参数较多的结合提交。如果仅有一个文件上传和少量的表单参数则比较适合       

//$('#uploadify').uploadifySettings('scriptData',{'user.username':$('#username').val()});//可以
        $('#uploadify').uploadifySettings('scriptData',{'user.username':'zhangxuekai','user.password':'1598210','userid':'haha'});    //可以
        //$('#uploadify').uploadifySettings('scriptData',{'computer.name':'dell','computer.price':'100'});    //可以
        //$('#uploadify').uploadifySettings('scriptData',{'userid':'zhangxuekai'});//可以
        //$('#uploadify').uploadifySettings('scriptData',{'userid':'1001','username':'zhangxuekai'});//可以
       
        //不可以
        //var jsonString = "{'user.username':'zhangxuekai','user.password':'1598210'}";
        //$('#uploadify').uploadifySettings('scriptData',jsonString);
       
        //不可以
        //var jsonString = convertToJson($('#registerForm').serializeArray());
        //alert(jsonString);
        //$('#uploadify').uploadifySettings('scriptData',jsonString);
       
        $('#uploadify').uploadifyUpload();
       }
       function startUpload(){
        $('#uploadify').fileUploadStart();
}
       function clearFile(){//清空所有上传队列
           $('#uploadify').uploadifyClearQueue();
       }
       function convertToJson(formValues) {
           var result = {};
           for(var formValue,j=0;j<formValues.length;j++) {
           formValue = formValues[j];
           var name = formValue.name;
           var value = formValue.value;
           if (name.indexOf('.') < 0) {
           result[name] = value;
           continue;
           } else {
           var simpleNames = name.split('.');
           // 构建命名空间
           var obj = result;
           for ( var i = 0; i < simpleNames.length - 1; i++) {
           var simpleName = simpleNames[i];
           if (simpleName.indexOf('[') < 0) {
           if (obj[simpleName] == null) {
           obj[simpleName] = {};
           }
           obj = obj[simpleName];
           } else { // 数组
           // 分隔
           var arrNames = simpleName.split('[');
           var arrName = arrNames[0];
           var arrIndex = parseInt(arrNames[1]);
           if (obj[arrName] == null) {
           obj[arrName] = []; // new Array();
           }
           obj = obj[arrName];
           multiChooseArray = result[arrName];
           if (obj[arrIndex] == null) {
           obj[arrIndex] = {}; // new Object();
           }
           obj = obj[arrIndex];
           }
           }
        
           if(obj[simpleNames[simpleNames.length - 1]] ) {
           var temp = obj[simpleNames[simpleNames.length - 1]];
           obj[simpleNames[simpleNames.length - 1]] = temp;
           }else {
           obj[simpleNames[simpleNames.length - 1]] = value;
           }
        
           }
           }
           //alert("转化的jsonObj:" +result)
           //alert("转化的jsonString:" +JSON.stringify(result));
           return JSON.stringify(result);
       }
        </script>
</head>

<body>
cc<%=basePath%>
<div id="full"></div>
<div id="fileQueue"></div>
        <input type="file" name="uploadify" id="uploadify" />
        <p>
        <a href="javascript:uploadFile()">Upload Files</a>&nbsp;
        <a href="javascript:clearFile()" id="cancelHref">Clear Queue</a>
        </p>
        <div id="message"></div>
        <div id="result"></div><!--显示结果-->
        
        <form id="registerForm" >
        <input type="text" name="user.username" id="username"/>
        <input type="text" name="user.password" id="password"/>
        <input type="text" name="userid" id="userid"/>
        </form>
        <input type="button" οnclick="convertToJson($('#registerForm').serializeArray())" value="转json">
        <br/>
    </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

UploadifyAction


package com.pb.cdjj.zxk.uploadAction;


import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;


import javax.servlet.http.HttpServletResponse;


import org.apache.struts2.ServletActionContext;


import com.opensymphony.xwork2.ActionSupport;
import com.pb.cdjj.zxk.entity.Computer;
import com.pb.cdjj.zxk.entity.User;


/**
 * @author zxk
 *
 */
public class UploadifyAction extends ActionSupport {

private static final int BUFFER_SIZE = 16*1024;
private File uploadify;
private String uploadifyFileName;
private String userid;
private String username;
private String folder;
private String fileext;
private User user;
private Computer computer;



public String uploadFile() throws Exception {
// System.out.println("computer.getName()-------->" + computer.getName());
// System.out.println("computer.getPrice()-------->" + computer.getPrice());
System.out.println("user.getUsername()-------->" + user.getUsername());
System.out.println("user.getPassword()-------->" + user.getPassword());
System.out.println("userid-------->" + userid);
System.out.println("username-------->" + username);
System.out.println("fileext-------->" + fileext);
System.out.println("folder-------->" + folder);
System.out.println("uploadifyFileName-------->" + uploadifyFileName);

String extName = "";// 扩展名


String newFileName = "";// 新文件名


String nowTime = new SimpleDateFormat("yyyymmddHHmmss").format(new Date());// 当前时间


String savePath = ServletActionContext.getRequest().getRealPath("/");

savePath = savePath + "upload/";
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");


// 获取扩展名
if (uploadifyFileName.lastIndexOf(".") >= 0) {
extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));
}
String fileName = uploadifyFileName.substring(0,uploadifyFileName.lastIndexOf("."));
System.out.println("fileName-------->" +fileName);
newFileName = fileName + nowTime + extName;
System.out.println("newFileName-------->" +newFileName);
// uploadify.renameTo(new File(savePath + newFileName));
copy(uploadify,new File(savePath + newFileName));



System.out.println("savePath-------->" + savePath);
response.getWriter().print(uploadifyFileName + "上传成功");

return null; // 这里不需要页面转向,所以返回空就可以了


}

private static void copy(File src, File dst) {
try {
System.out.println("进入copy()");
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(src),BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst),BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
// while (in.read(buffer) > 0) {
// out.write(buffer);
// }
int length = 0;
while ((length = in.read(buffer)) != -1) {
out.write(buffer, 0, length);
}
} finally {
if (null != in) {
in.close();
}
if (null != out) {
out.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}



public User getUser() {
return user;
}


public void setUser(User user) {
this.user = user;
}


public String getFileext() {
return fileext;
}


public void setFileext(String fileext) {
this.fileext = fileext;
}


public String getFolder() {
return folder;
}


public void setFolder(String folder) {
this.folder = folder;
}


public String getUserid() {
return userid;
}


public void setUserid(String userid) {
this.userid = userid;
}


public String getUsername() {
return username;
}


public void setUsername(String username) {
this.username = username;
}


public File getUploadify() {
return uploadify;
}


public void setUploadify(File uploadify) {
this.uploadify = uploadify;
}


public String getUploadifyFileName() {
return uploadifyFileName;
}


public void setUploadifyFileName(String uploadifyFileName) {
this.uploadifyFileName = uploadifyFileName;
}


public Computer getComputer() {
return computer;
}


public void setComputer(Computer computer) {
this.computer = computer;
}
}


-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

strusts.xml


<action name="uploadAction" class="com.pb.cdjj.zxk.uploadAction.UploadifyAction" method="uploadFile">

</action>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Uploadify是一个基于jQuery的文件上传插件,可以方便地上传文件,支持多文件上传,选择文件窗口可以自定义样式,同时具有断点续传、上传进度条等功能。下载Uploadify-3.2很简单,只需要到官网(https://www.uploadify.com/)下载最新版本即可。下载后解压缩,将上传所需的文件放到项目目录下的相应位置(比如说放到js目录下),然后在HTML页面中引入Uploadify所需的CSS和JS文件,在文件上传按钮的HTML标签上添加"file-upload"类名,然后在JS中调用uploadify方法即可,上传逻辑由该方法控制。在调用过程中,还可以通过参数设置多文件上传、文件类型、文件大小等相关限制,可以灵活应对各种上传需求。总之,下载并使用Uploadify-3.2是非常方便、快捷的,可以大大简化上传操作,提高文件上传时的用户体验。 ### 回答2: 要下载Uploadify 3.2,您可以按照以下步骤进行操作: 1. 打开您的网络浏览器,例如Google Chrome,Mozilla Firefox或Microsoft Edge。 2. 在浏览器的搜索栏中输入“Uploadify 3.2下载”或直接访问Uploadify官方网站。 3. 在搜索结果中选择官方网站链接,确保是来自可信赖的来源。 4. 进入官方网站后,在页面上找到下载按钮或相关的下载链接。 5. 点击下载按钮或链接,开始下载Uploadify 3.2安装文件。 6. 在弹出的窗口中选择保存文件的位置。您可以选择将文件保存到您计算机的任意位置。 7. 等待下载完成。下载速度取决于您的网络连接质量和文件大小。 8. 下载完成后,转到保存文件的位置。 9. 双击安装文件,按照安装向导的指示完成Uploadify 3.2的安装过程。 通过以上步骤,您应该能够成功下载并安装Uploadify 3.2。请注意,确保从官方网站下载文件,以确保文件的完整性和安全性。 ### 回答3: 要下载 uploadify-3.2,你可以按照以下步骤进行: 1. 首先,在网络上搜索 uploadify-3.2 的下载链接。可以尝试在搜索引擎或开源代码托管平台上查找相关资源。 2. 找到适合的下载链接后,点击进入下载页面。 3. 在下载页面上,可能会提供多个下载选项。选择适合你电脑操作系统的版本,比如 Windows 或 macOS。 4. 点击下载按钮,开始下载 uploadify-3.2 的安装文件。 5. 下载完成后,找到下载的文件。通常情况下,它会保存在你电脑的默认下载文件夹中,或者你自己设置的下载路径中。 6. 打开下载的文件,开始安装 uploadify-3.2。根据安装界面的指示,完成安装过程。 7. 安装完成后,你就可以使用 uploadify-3.2 进行文件上传操作了。根据官方文档或相关教程,学习如何使用 uploadify-3.2 的各种功能和特性。 请注意,在下载和安装任何软件前,请确保来源可信,并且下载的文件没有被修改或附带恶意代码。建议从官方网站或可信赖的开源社区下载软件以确保安全。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值