uploadify是基于jQuery的一种带进度条的文件上传控件,下面直接给出操作步骤:
1、到官网下载控件http://www.uploadify.com
2、解压控件放到项目Webcontent目录下
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;" οnclick="javascript:$('#upload').uploadify('upload','*')">开始上传</button>
<button type="button" id="cancelupload" class="btn btn-primary" style="width:134px;" οnclick="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);的方式接收数据。