Jquery_Uploadify3.2与Struts2结合学习笔记 -

ZhanzhongChu

浏览: 64942 次
性别:
来自: 上海

最近访客更多访客>>

河畔之许愿树

leimingchao

Eventhought

qiaopeng1980

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Jquery_Uploadify3.2与Struts2结合学习笔记

博客分类：

jquery

jquery uploadify

1、下载到官方网址下载“uploadify3.2”插件。

2、下载swfobject_2_2js插件

3、搭建struts2框架。

4、创建upload2.jsp页面，内容如下：

<%@ page language="java" import="java.util.*" 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">

<html>

<head>

<title>Jquery插件上传</title>

<!--

-->

$(function() {

$("#file_upload").uploadify({

debug:false,

auto:true,//是否自动上传

height: 30,

buttonText:'上传文件',

cancelImage:'js/uploadify/uploadify-cancel.png',

swf : 'js/uploadify/uploadify.swf',

expressInstall:'js/uploadify/expressInstall.swf',

uploader : '<%=path%>/upload/fileUpload.action', //后台处理上传文件的action

width : 120 ,

multi:false,//是否允许多个文件上传

queueID:'uploadfileQueue',

fileObjName:'fileName', //与后台Action中file属性一样

formData:{ //附带值

'userid':'111',

'username':'tom',

'rnd':'111'

successTimeout:99999,//上传超时时间

overrideEvents:['onDialogClose'],

fileTypeDesc:'上传文件支持的文件格式:jpg,jpge,gif,png',

fileTypeExts:'*.*',//*.jpg;*.jpge;*.gif;*.png

queueSizeLimit : 3,//

// simUploadLimit:1,//一次可以上传1个文件

fileSizeLimit:'20MB',//上传文件最大值

//返回一个错误，选择文件的时候触发

onSelectError:function(file, errorCode, errorMsg){

switch(errorCode) {

case -100:

alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");

break;

case -110:

alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");

break;

case -120:

alert("文件 ["+file.name+"] 大小异常！");

break;

case -130:

alert("文件 ["+file.name+"] 类型不正确！");

break;

}

//每次更新上载的文件的进展

onUploadProgress: function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {

//alert(bytesUploaded);

//有时候上传进度什么想自己个性化控制，可以利用这个方法

//使用方法见官方说明

//检测FLASH失败调用

onFallback:function(){

alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");

//上传到服务器，服务器返回相应信息到data里

onUploadSuccess:function(file, data, response){

var fileNameAndPath=data.split(",");

var phtml="<p><a href='#' onlick=downLoad('"+fileNameAndPath[1]+"')>"+fileNameAndPath[0]+"</a><img alt='删除' src='js/uploadify/uploadify-cancel.png' onclick=delFile(this)></p>";

if($("#uploadfileQueue p").length==0){

$("#uploadfileQueue").html(phtml);

}else{

$("#uploadfileQueue p:last").after(phtml);

}

//alert(data+"上传成功");

onSelect : function(file) {

//alert(file.name);

removeCompleted:true,//上传的文件进度条是否消失

requeueErrors:false,

removeTimeout:2,//进度条消失的时间，默认为3

progressData:"percentage",//显示上传的百分比

onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {

$("#dialog-message").html(errorString);

} ,

onError:function(event, queueID, fileObj){

alert("文件:" + fileObj.name + " 上传失败");

}

});

//删除文件

function delFile(obj){

$(obj).parent().remove();

}

</script>

</head>

<body>

</div>

</body>

</html>

5、创建处理上传文件FileUploadAction.java,内容如下：

/**

* @title FileUploadAction.java

* @package com.ys.uploadfile.action

* @description 文件描述

* @author lijf

* @update 2012-12-13 下午04:17:35

* @version V1.0

package com.ys.uploadfile.action;

import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import java.io.InputStream;

import java.nio.charset.Charset;

import java.text.DateFormat;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.Iterator;

import java.util.List;

import java.util.UUID;

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;

import org.apache.struts2.ServletActionContext;

import org.apache.struts2.interceptor.ServletRequestAware;

import com.opensymphony.xwork2.ActionSupport;

public class FileUploadAction extends ActionSupport implements ServletRequestAware {

/**

* @fields serialVersionUID

private static final long serialVersionUID = 1L;

private HttpServletRequest request;

private List<File> fileName;//这里的"fileName"一定要与表单中的文件域名相同

private List<String> fileNameContentType;//格式同上"fileName"+ContentType

private List<String> fileNameFileName;//格式同上"fileName"+FileName

private String savePath;//文件上传后保存的路径

/**

* @return

* @throws Exception

* @author lijf

* @description 上传文件

* @update 2013-1-26 下午02:15:26

public void upload() throws Exception {//intentionPicture

String uploadFileName="";

File dir=new File(getSavePath());

String savePath=getSavePath();//保存上传文件的地址

if(!dir.exists()){

dir.mkdirs();

}

List<File> files=getFileName();

for(int i=0;i<files.size();i++){

FileOutputStream fos=new FileOutputStream(getSavePath()+"\\"+getFileNameFileName().get(i));

FileInputStream fis=new FileInputStream(getFileName().get(i));

byte []buffers=new byte[1024];

int len=0;

while((len=fis.read(buffers))!=-1){

fos.write(buffers,0,len);

}

fos.close();

fis.close();

uploadFileName=getFileNameFileName().get(i);

}

//设置响应内容的字符串编码

ServletActionContext.getResponse().setCharacterEncoding("UTF-8");

ServletActionContext.getResponse().setContentType("text/plain");

ServletActionContext.getResponse().getWriter().print(uploadFileName+","+savePath+"\\"+uploadFileName);

}

/* (non-Javadoc)下载文件

* @see com.opensymphony.xwork2.ActionSupport#execute()

@Override

public String execute() throws Exception {

// TODO Auto-generated method stub

return "success";

}

public InputStream getInputStream() {

return ServletActionContext.getServletContext().getResourceAsStream("/" + fileName);

}

/* (non-Javadoc)

* @see org.apache.struts2.interceptor.ServletRequestAware#setServletRequest(javax.servlet.http.HttpServletRequest)

public void setServletRequest(HttpServletRequest req) {

this.request=req;

}

public List<File> getFileName() {

return fileName;

}

public void setFileName(List<File> fileName) {

this.fileName = fileName;

}

public List<String> getFileNameContentType() {

return fileNameContentType;

}

public void setFileNameContentType(List<String> fileNameContentType) {

this.fileNameContentType = fileNameContentType;

}

public List<String> getFileNameFileName() {

return fileNameFileName;

}

public void setFileNameFileName(List<String> fileNameFileName) {

this.fileNameFileName = fileNameFileName;

}

@SuppressWarnings("deprecation")

public String getSavePath() {

return request.getRealPath(savePath);

}

public void setSavePath(String savePath) {

this.savePath = savePath;

}

6、 struts2.xml配置内容如下

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"

"http://struts.apache.org/dtds/struts-2.3.dtd">

<param name="savePath">/uploads</param>

</action>

</package>

</struts>

注：uploadify的属性配置请参考附件

Uploadify3.1与2.1.6参数详解.rar (18.4 KB)
下载次数: 71

分享到：

使用过滤器和拦截器做访问权限限制 | uploadify 上传,传递参数到服务端 .

2014-07-15 18:06
浏览 4054
评论(1)
分类:Web前端
查看更多

1 楼 masuweng 2016-09-23

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery_Uploadify3.2与Struts2结合学习笔记

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery_Uploadify3.2与Struts2结合学习笔记

评论

发表评论

相关推荐

Jquery Validate 相关参数

uploadify 上传,传递参数到服务端 .

jQuery ajax - ajax() 方法

最近访客更多访客>>