uploadify控件上传文件and后台Struts2框架

时间:2021-05-07 21:00:39

uploadify是基于jQuery的一种带进度条的文件上传控件,下面直接给出操作步骤:

1、到官网下载控件http://www.uploadify.com

2、解压控件放到项目Webcontent目录下uploadify控件上传文件and后台Struts2框架

3、编写上传jsp页面,首先引入几个文件,

(1)<link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />

(2)<script type="text/javascript" src="jquery/1.11.3/jquery.min.js"></script>

(3)<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>

注意:uploadify控件基于jQuery,一定要在jQuery文件之后引入uploadify,否则无效!!!

<input type="file" name="file" id="upload"/>
<button type="button" id="startupload" class="btn btn-primary" style="width:134px;" onclick="javascript:$('#upload').uploadify('upload','*')">开始上传</button>
<button type="button" id="cancelupload" class="btn btn-primary" style="width:134px;" onclick="javascript:$('#upload').uploadify('cancel')">取消上传</button>

4、编写js文件,通过$("#upload").uploadify({});引用控件,控件含有很多参数和方法,在此不做一一介绍,主要介绍常容易犯错的几个,'swf':解压包中的uploadify.swf flash文件,'uploader':后台接收上传文件的action(如"FileUpLoad.action"),'fileObjName':此处的参数值是Jap页面中的input name,后台接收action中定义的文件变量名也必须与此一致,否则接收不到文件。至此前台代码编写工作就完成了。

5,、后台接收文件我采用Struts2框架。首先创建一个action类FileUpLoadAction,定义四个主要的变量,private File file;private String fileContentType;private String fileFileName;private String savePath;然后在public String execute(){

String root = ServletActionContext.getServletContext().getRealPath(getSavePath());
    InputStream is = new FileInputStream(getFile()); 
       OutputStream os = new FileOutputStream(new File(root, "WebPlugin.exe")); 
    byte[] buffer = new byte[1024];
    int len = 0;
    while((len=is.read(buffer,0,buffer.length))!=-1){
    os.write(buffer,0,len);
    }

is.close();
    os.close();
    return Action.SUCCESS;

}

方法中执行文件接收操作,注意:此操作只是从.tmp临时文件中读出文件到保存处,故通过以上几个变量获取的都只是临时文件的信息。

6、最后就是配置Struts.xml文件了,定义一个action,如:

<action name="FileUpLoad" class="com.gmi.client.FileUpLoadAction">
<param name="savePath">/download</param>
<result name="input">/fileupload.jsp</result>
<result name="success">/loadsucc.jsp</result>
</action>

完成以上这些操作就可以实现文件上传了!!!

但是,uploadify也存在缺陷,采用uploadify控件上传文件,Firefox浏览器存在session丢失的问题。

解决方法:采用'formData'参数向后台传递数据,如session丢失,可以通过该参数向后台提交sessionID('formData':{"sessionid":sid},)。后台采用req.getParameter(sessionID);的方式接收数据。