你先要下载uploadify插件的一个版本,例如:jquery.uploadify-v2.1.0.zip,解压得到其中的几个关键文件即可开始下面的示例。
上传显示页面<uploadFileDemo.jsp>的代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
font: 12px/16px Arial, Helvetica, sans-serif;
}
#fileQueue {
width: 400px;
height: 300px;
overflow: auto;
border: 1px solid #E5E5E5;
margin-bottom: 10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传演示</title>
<link href="/xndt/include/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/xndt/include/js/jquery1.4.2.js" ></script>
<script language="javascript" src="/xndt/include/js/jquery.uploadify.swfobject.js"></script>
<script language="javascript" src="/xndt/include/js/jquery.uploadify.js"></script>
<script type="text/javascript">
function showResult(){//删除显示的上传成功结果
$("#result").html("");
}
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader' : '/xndt/include/swf/uploadify.swf',
'script': '/xndt/uploadifyAction!uploadFile.action', //指定服务端处理类的入口
'folder': 'temp',
'cancelImg' : '/xndt/images/cancel.png',
'fileDataName': 'fileInput', //和input的name属性值保持一致就好,Struts2就能处理了
'queueID': 'fileQueue',
'auto': false,//是否选取文件后自动上传
'multi': true,//是否支持多文件上传
'simUploadLimit' : 5,//每次最大上传文件数
'buttonText': 'Browse Files',//按钮上的文字
'displayData': 'percentage',//有speed和percentage两种,一个显示速度,一个显示完成百分比
'onComplete': function (event, queueID, fileObj, response, data){
$("#result").html(response);//显示上传成功结果
setInterval("showResult()",2000);//两秒后删除显示的上传成功结果
}
});
});
</script>
</head>
<body>
<div id="fileQueue"></div>
<input type="file" name="fileInput" id="fileInput" />
<a href="javascript:$('#fileInput').uploadifyUpload();" >开始上传</a>
<a href="javascript:$('#fileInput').uploadifyClearQueue();" >取消上传队列</a> <br> <br>
<div id="result"></div><!--显示结果-->
</body>
</html>
服务端处理类<UploadFileDemoAction.java>的代码
package com.sun.demoAction;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadFileDemoAction extends ActionSupport {
private File fileInput;
private String fileInputFileName;//Struts2的拦截器FileUploadInterceptor根据请求对象中参数"fileInput"来自行生产的一个固有属性
public File getFileInput() {
return fileInput;
}
public void setFileInput(File fileInput) {
this.fileInput = fileInput;
}
public String getFileInputFileName() {
return fileInputFileName;
}
public void setFileInputFileName(String fileInputFileName) {
this.fileInputFileName = fileInputFileName;
}
@SuppressWarnings("deprecation")
public String uploadFile() throws Exception {
String savePath = ServletActionContext.getRequest().getRealPath("");
savePath = savePath + "/uploadFile/";
String extName = "";//扩展名
String newFileName= "";//新文件名
System.out.println("原文件名称:" + fileInputFileName);
//获取扩展名
if(fileInputFileName.lastIndexOf(".") > -1){
extName = fileInputFileName.substring(fileInputFileName.lastIndexOf("."));
}
String nowTime = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());//当前时间
newFileName = nowTime + extName;
System.out.println("保存的文件名称:" + savePath + newFileName);
fileInput.renameTo(new File(savePath + newFileName));
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.getWriter().print("成功上传文件《" + fileInputFileName + "》!");
return null; //这里不需要页面转向,所以返回空就可以了
}
}
该Action的在XML中的映射信息:
<action name="uploadifyAction" class="com.sun.demoAction.UploadFileDemoAction" method="uploadFile"/>
注意事项:
1:需要去重写struts2的配置文件struts.properties中的以下属性的值,
例如:
struts.multipart.saveDir=d:/aaa // 设置Struts2的拦截器FileUploadInterceptor处理过程中临时文件的存放路径
struts.multipart.maxSize=4294967296 // 设置上传文件大小,最大支持到4GB
struts.multipart.parser=jakarta
分享到:
相关推荐
3. **jQuery.uploadify**:uploadify是一个基于jQuery的文件上传组件,它通过异步方式实现文件的批量上传。使用uploadify时,我们需要在HTML中添加一个`<input type="file">`元素,并为其绑定uploadify插件。通过...
在本篇文章中,我们将深入探讨如何结合Struts2和jQuery的uploadify插件来实现文件上传功能,这在现代Web应用程序中是非常常见的需求。 首先,Struts2是一个基于MVC(Model-View-Controller)架构的开源Java框架,它...
在压缩包中,包含的主要文件是`jquery.uploadify-v2.1.4`,这可能是一个包含完整源代码、示例、文档以及必要的CSS和JavaScript文件的文件夹。为了使用这个修正版,你需要将相关文件引入到你的项目中,并根据你的需求...
《jQuery文件上传插件jQuery....对于需要在多种浏览器环境下实现文件上传功能的Web开发者,jQuery.uploadify.js是一个值得考虑的选择。通过深入理解和熟练运用,开发者可以创建出高效、用户友好的文件上传体验。
在IT行业中,文件上传功能是网站和应用程序中不可或...总之,`jQuery.uploadify-v2.1.4`是一个强大而易用的多文件上传解决方案,通过合理的配置和适当的后端配合,可以在各种项目中轻松实现高效、美观的文件上传功能。
ASP.NET结合jQuery Uploadify实现文件异步上传是一种常见的前端与后端交互技术,它极大地提升了用户体验,使得用户在上传大文件时无需等待页面刷新。在这个过程中,jQuery Uploadify插件负责前端的文件选择和上传...
jQuery.uploadify是一款非常实用的jQuery插件,专为实现用户友好的文件上传体验而设计。该插件以其易用性和灵活性在开发者社区中享有盛誉。今天我们将深入探讨jQuery.uploadify的功能、使用方法以及其在实际项目中的...
在这个项目中,我们关注的是jQuery.uploadify插件,它是一个流行的JavaScript库,用于实现文件上传功能。jQuery.uploadify提供了一种用户友好的界面,允许用户批量上传文件,并在上传过程中提供进度条反馈。这个测试...
uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。
以上就是Struts2结合jQuery.uploadify实现文件上传的基本流程。实际应用中,可能还需要考虑其他因素,如安全性(防止文件覆盖、XSS攻击等)、性能优化(批量上传、分片上传等)等。通过熟练掌握这些知识点,可以构建...
jquery.uploadify-3.1.min.js 修改了SWFUpload.prototype.getFlashHTML ()方法,解决了在ie9在点击上传按钮后,不能弹出浏览文件的对话框问题。
2. **事件处理**:Uploadify提供了丰富的事件,如`onSelect`(文件选择后触发)、`onUploadSuccess`(文件上传成功后触发)和`onError`(上传过程中发生错误时触发),开发者可以通过绑定回调函数来实现自定义逻辑。...
解决 jquery.uploadify.js 在ie9 下 二次打开失效问题等问题
在IT行业中,jQuery Uploadify.js是一款非常流行的前端文件上传插件,它允许用户通过异步方式上传文件到服务器,提供了一种友好的用户体验。然而,随着浏览器版本的更新,一些较旧的插件可能不再兼容新的浏览器,...
php+jQuery.uploadify实现文件上传教程的主要知识点涉及了如何使用jQuery.uploadify这个插件配合PHP后台进行文件的上传操作。在这个教程中,会详细讲解文件上传的基本流程以及如何配置和使用uploadify插件,包括前端...
在本文中,我们将深入探讨如何在Asp.net环境中利用Jquery.Uploadify插件实现文件的批量上传功能。Asp.net是一种强大的Web应用程序框架,而Jquery.Uploadify是jQuery库的一个扩展,专门用于处理文件上传,它允许用户...
《jQuery.Uploadify 多文件上传DEMO在VS2010中的实现详解》 在Web开发中,用户经常需要上传多个文件,为了提高用户体验,单个文件上传已不能满足需求,这时多文件上传功能就显得尤为重要。jQuery.Uploadify是一款...
struts2 +jquey uploadify3 2 实现多文件上传 可以运行的myeclipse工程 绝对好用 访问方式http: 127 0 0 1:8080 Struts2Uploadify upload jsp uploadify 使用说明: <a href "javascript:$ "#file ...
jQuery.uploadify是基于jQuery库的一个插件,它通过Flash技术实现了多文件同时上传的功能,使得用户可以在无需刷新页面的情况下批量上传文件。在v2.1.4版本中,这个特性得到了充分的体现,不仅提高了用户体验,还...
jquery.uploadify.v2.1.0.js 上传