`

Struts2+Jquery.uploadify实现的文件上传特效示例代码 转载

    博客分类:
  • j2ee
阅读更多
你先要下载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" />  &nbsp;&nbsp;&nbsp;&nbsp;
      
<a href="javascript:$('#fileInput').uploadifyUpload();"  >开始上传</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
<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 
分享到:
评论

相关推荐

    struts2+jquery.uploadify实现上传下载

    3. **jQuery.uploadify**:uploadify是一个基于jQuery的文件上传组件,它通过异步方式实现文件的批量上传。使用uploadify时,我们需要在HTML中添加一个`&lt;input type="file"&gt;`元素,并为其绑定uploadify插件。通过...

    struts2+jquery.uploadify

    在本篇文章中,我们将深入探讨如何结合Struts2和jQuery的uploadify插件来实现文件上传功能,这在现代Web应用程序中是非常常见的需求。 首先,Struts2是一个基于MVC(Model-View-Controller)架构的开源Java框架,它...

    jquery.uploadify-v2.1.4[修正版]

    在压缩包中,包含的主要文件是`jquery.uploadify-v2.1.4`,这可能是一个包含完整源代码、示例、文档以及必要的CSS和JavaScript文件的文件夹。为了使用这个修正版,你需要将相关文件引入到你的项目中,并根据你的需求...

    jquery文件上传插件 jquery.uploadify.js

    《jQuery文件上传插件jQuery....对于需要在多种浏览器环境下实现文件上传功能的Web开发者,jQuery.uploadify.js是一个值得考虑的选择。通过深入理解和熟练运用,开发者可以创建出高效、用户友好的文件上传体验。

    上传控件jquery.uploadify-v2.1.4的示例源码

    在IT行业中,文件上传功能是网站和应用程序中不可或...总之,`jQuery.uploadify-v2.1.4`是一个强大而易用的多文件上传解决方案,通过合理的配置和适当的后端配合,可以在各种项目中轻松实现高效、美观的文件上传功能。

    asp.net+jquery.uploadify文件上传(异步上传)

    ASP.NET结合jQuery Uploadify实现文件异步上传是一种常见的前端与后端交互技术,它极大地提升了用户体验,使得用户在上传大文件时无需等待页面刷新。在这个过程中,jQuery Uploadify插件负责前端的文件选择和上传...

    jquery.uploadify-v2.1.0.rar

    jQuery.uploadify是一款非常实用的jQuery插件,专为实现用户友好的文件上传体验而设计。该插件以其易用性和灵活性在开发者社区中享有盛誉。今天我们将深入探讨jQuery.uploadify的功能、使用方法以及其在实际项目中的...

    ASP.NET jquery.uploadify文件上传控件测试项目(已解决中文乱码)

    在这个项目中,我们关注的是jQuery.uploadify插件,它是一个流行的JavaScript库,用于实现文件上传功能。jQuery.uploadify提供了一种用户友好的界面,允许用户批量上传文件,并在上传过程中提供进度条反馈。这个测试...

    jquery.uploadify.js 3.2.1

    uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。

    Struts2结合Jquery.uploadify上传插件的应用

    以上就是Struts2结合jQuery.uploadify实现文件上传的基本流程。实际应用中,可能还需要考虑其他因素,如安全性(防止文件覆盖、XSS攻击等)、性能优化(批量上传、分片上传等)等。通过熟练掌握这些知识点,可以构建...

    jquery.uploadify-3.1.min.js

    jquery.uploadify-3.1.min.js 修改了SWFUpload.prototype.getFlashHTML ()方法,解决了在ie9在点击上传按钮后,不能弹出浏览文件的对话框问题。

    jquery.uploadify.js修复IE9 IE10浏览按钮点击无效的bug

    2. **事件处理**:Uploadify提供了丰富的事件,如`onSelect`(文件选择后触发)、`onUploadSuccess`(文件上传成功后触发)和`onError`(上传过程中发生错误时触发),开发者可以通过绑定回调函数来实现自定义逻辑。...

    jquery.uploadify.js 兼容IE9

    解决 jquery.uploadify.js 在ie9 下 二次打开失效问题等问题

    jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改

    在IT行业中,jQuery Uploadify.js是一款非常流行的前端文件上传插件,它允许用户通过异步方式上传文件到服务器,提供了一种友好的用户体验。然而,随着浏览器版本的更新,一些较旧的插件可能不再兼容新的浏览器,...

    php+jQuery.uploadify实现文件上传教程

    php+jQuery.uploadify实现文件上传教程的主要知识点涉及了如何使用jQuery.uploadify这个插件配合PHP后台进行文件的上传操作。在这个教程中,会详细讲解文件上传的基本流程以及如何配置和使用uploadify插件,包括前端...

    Asp.net 上传 Jquery.Uploadify 实例

    在本文中,我们将深入探讨如何在Asp.net环境中利用Jquery.Uploadify插件实现文件的批量上传功能。Asp.net是一种强大的Web应用程序框架,而Jquery.Uploadify是jQuery库的一个扩展,专门用于处理文件上传,它允许用户...

    jQuery.Uploadify 多文件上传DEMO VS2010

    《jQuery.Uploadify 多文件上传DEMO在VS2010中的实现详解》 在Web开发中,用户经常需要上传多个文件,为了提高用户体验,单个文件上传已不能满足需求,这时多文件上传功能就显得尤为重要。jQuery.Uploadify是一款...

    struts2 +jquey uploadify3.2 实现多文件上传

    struts2 +jquey uploadify3 2 实现多文件上传 可以运行的myeclipse工程 绝对好用 访问方式http: 127 0 0 1:8080 Struts2Uploadify upload jsp uploadify 使用说明: &lt;a href &quot;javascript:$ &quot;#file ...

    jquery.uploadify-v2.1.4上传文件完整例子

    jQuery.uploadify是基于jQuery库的一个插件,它通过Flash技术实现了多文件同时上传的功能,使得用户可以在无需刷新页面的情况下批量上传文件。在v2.1.4版本中,这个特性得到了充分的体现,不仅提高了用户体验,还...

    jquery.uploadify.v2.1.0.js 上传

    jquery.uploadify.v2.1.0.js 上传

Global site tag (gtag.js) - Google Analytics