上一篇说到怎样在struts2中进行上传下载。我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步上传。

此例中须要的文件能够点击这里下载:struts2异步所需文件

文件说明:

ajaxfileupload.js : jquery不支持上传,所以使用这个ajax插件,和 jquery 中的ajax使用方法差点儿相同,从以下代码能够看到。

json2.js : 对ajax中的回调參数进行json封装,以此获得參数值。由于struts2返回的json中有网页标签就像这样:



,所以我们text方式返回,再通过此插件拿到參数

struts2-json-plugin-2.3.15.1 : 使用json,须要加入这个jar包

代码例如以下:

struts.xml

  1. <?
  2. xml version="1.0" encoding="UTF-8" ?>
  3. <!DOCTYPE struts PUBLIC
  4. "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
  5. "http://struts.apache.org/dtds/struts-2.3.dtd">
  6. <struts>
  7. <constant name="struts.devMode" value="true" /> <!-- 开发模式 -->
  8. <package name="up" extends="json-default">
  9. <default-action-ref name="index"></default-action-ref>
  10. <action name="index">
  11. <result>/index.jsp</result>
  12. </action>
  13. <action name="upload" class="com.etoak.action.UploadAction">
  14. <result name="success" type="json">
  15. <param name="contentType">text/plain</param>
  16. </result>
  17. </action>
  18. <action name="delFile" class="com.etoak.action.DelFileAction">
  19. <result type="json"></result>
  20. </action>
  21. </package>
  22. </struts>

UploadAction:

注意:我们使用struts中json方式返回后。全部写了get方法的属性都会被封装到json中。返回到前台,所以不须要返回的属性能够把get方法凝视掉。

  1. package com.etoak.action;
  2. import java.io.File;
  3. import java.util.List;
  4. import org.apache.commons.io.FileUtils;
  5. import org.apache.struts2.ServletActionContext;
  6. import org.omg.CORBA.PUBLIC_MEMBER;
  7. import com.etoak.util.UUIDGenerator;
  8. import com.opensymphony.xwork2.ActionSupport;
  9. public class UploadAction extends ActionSupport {
  10. private File myfile;
  11. private String myfileFileName;
  12. // 又一次命名后的文件全名
  13. private String newFileName;
  14. /*
  15. * public File getMyFile() { return myFile; }
  16. */
  17. public void setMyfile(File myfile) {
  18. this.myfile = myfile;
  19. }
  20. /*
  21. * public String getMyfileFileName() { return myfileFileName; }
  22. */
  23. public void setMyfileFileName(String myfileFileName) {
  24. this.myfileFileName = myfileFileName;
  25. }
  26. public String getNewFileName() {
  27. return newFileName;
  28. }
  29. /*
  30. * public void setNewFileName(String newFileName) { this.newFileName =
  31. * newFileName; }
  32. */
  33. @Override
  34. public String execute() throws Exception {
  35. newFileName = new UUIDGenerator().generate()
  36. + myfileFileName.substring(myfileFileName.lastIndexOf("."));
  37. String path = ServletActionContext.getServletContext().getRealPath(
  38. "/image")
  39. + "/" + newFileName;
  40. // newFileName自带getter方法,所以会加入到json中。返回前台
  41. File destFile = new File(path);
  42. // System.out.println(path);
  43. FileUtils.copyFile(myfile, destFile);
  44. return this.SUCCESS;
  45. }
  46. }

DelFileAction:

  1. package com.etoak.action;
  2. import java.io.File;
  3. import java.util.List;
  4. import org.apache.commons.io.FileUtils;
  5. import org.apache.struts2.ServletActionContext;
  6. import org.omg.CORBA.PUBLIC_MEMBER;
  7. import com.etoak.util.UUIDGenerator;
  8. import com.opensymphony.xwork2.ActionSupport;
  9. public class UploadAction extends ActionSupport {
  10. private File myfile;
  11. private String myfileFileName;
  12. // 又一次命名后的文件全名
  13. private String newFileName;
  14. /*
  15. * public File getMyFile() { return myFile; }
  16. */
  17. public void setMyfile(File myfile) {
  18. this.myfile = myfile;
  19. }
  20. /*
  21. * public String getMyfileFileName() { return myfileFileName; }
  22. */
  23. public void setMyfileFileName(String myfileFileName) {
  24. this.myfileFileName = myfileFileName;
  25. }
  26. public String getNewFileName() {
  27. return newFileName;
  28. }
  29. /*
  30. * public void setNewFileName(String newFileName) { this.newFileName =
  31. * newFileName; }
  32. */
  33. @Override
  34. public String execute() throws Exception {
  35. newFileName = new UUIDGenerator().generate()
  36. + myfileFileName.substring(myfileFileName.lastIndexOf("."));
  37. String path = ServletActionContext.getServletContext().getRealPath(
  38. "/image")
  39. + "/" + newFileName;
  40. // newFileName自带getter方法。所以会加入到json中,返回前台
  41. File destFile = new File(path);
  42. // System.out.println(path);
  43. FileUtils.copyFile(myfile, destFile);
  44. return this.SUCCESS;
  45. }
  46. }

index.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5. <title>jquery异步上传</title>
  6. </head>
  7. <body>
  8. <input type="file" name="myfile" id="myfile" />
  9. <input type="button" value="上传" id="upload" />
  10. <div id="files" ></div>
  11. <script type="text/javascript" src="script/jquery-1.10.2.js"></script>
  12. <script type="text/javascript" src="script/json2.js"></script>
  13. <script type="text/javascript" src="script/ajaxfileupload.js"></script><!-- jquery不支持上传 -->
  14. <script type="text/javascript">
  15. $(document).ready(function(){
  16. //上传文件。点击上传后
  17. $("#upload").click(function(){
  18. var $myfile = $("#myfile").val();
  19. //检查用户是否上传了文件
  20. if($myfile!=""){
  21. //開始调用ajax异步请求
  22. //此方法由ajaxfileupload.js提供
  23. $.ajaxFileUpload({
  24. url:"upload.action",
  25. type:"post",
  26. //提交上传文件的控件
  27. fileElementId:"myfile",
  28. //是否支持跨域传输
  29. //默认不支持
  30. secureuri:false,
  31. //由于不能直接解析json,所以必须依照字符串
  32. dataType:"text",
  33. success:function(data){
  34. alert(data);
  35. //将json数据从标签中取出
  36. var text = $(data).html();
  37. //转换为js对象
  38. var obj = JSON.parse(text);
  39. //获得文件信息
  40. var filename = obj.newFileName;
  41. $("#files").append("<img name='"+filename+"' src='image/"+filename+"' style='width:200px;height:100px' />");
  42. //解除img元素上全部绑定的事件
  43. $("img").unbind();
  44. $("img").click(function(){
  45. //拿取图片name属性
  46. var fn = $(this).attr("name");
  47. if(confirm("确定删除?")){
  48. $.ajax({
  49. url:"delFile.action",
  50. type:"post",
  51. data:"filename="+fn,
  52. dataType:"json",
  53. success:function(data){
  54. if(data.flag){
  55. alert("删除成功");
  56. //拿到32位随机码
  57. var uuid = fn.substring(0,fn.indexOf("."));
  58. //拿取img元素name属性开头符合uuid的元素
  59. $("img[name^="+uuid+"]").remove();
  60. }
  61. }
  62. });
  63. }
  64. });
  65. },
  66. error:function(err){
  67. alert(err.status);
  68. }
  69. });
  70. }
  71. });
  72. });
  73. </script>
  74. </body>
  75. </html>

页面效果例如以下:



Struts2学习(四)利用ajax异步上传的更多相关文章

  1. 利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载

    利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载 1.页面显示代码 <%@ page language="java" import="java ...

  2. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  3. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  4. java使用xheditor Ajax异步上传错误

    java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...

  5. Spring使用ajax异步上传文件

    单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...

  6. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  7. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  8. ajax异步上传到又拍云的实例教程

    作者:白狼 出处:www.manks.top/article/async_upload_to_upyun 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否 ...

  9. ajax 异步上传视频带进度条并提取缩略图

    最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...

随机推荐

  1. NAT&amp;Port Forwarding&amp;Port Triggering

    NAT     Nat,网络地址转换协议.主要功能是实现局域网内的本地主机与外网通信.     在连接外网时,内部Ip地址须要转换为网关(一般为路由器Ip地址)(port号也须要对应的转换)     ...

  2. java 递归实现删除或查询指定目录下的全部文件

    /** * 递归列举盘符下的全部文件的名称,如E:\HeartIsland * * @author HeartIsland * */ public class FileListDemo { /** * ...

  3. 【转】iOS多语言本地化(国际化)设置

    原文网址:http://www.jianshu.com/p/2b7743ae9c90 讨论的iOS应用中的多语言设置,Ok 一般是两种情况: 1.根据当前设备语言自动切换显示 2.在应用中可进行语言设 ...

  4. Linux就该这么学 20181011(第十五章邮件)

    参考链接:https://www.linuxprobe.com. https://www.linuxprobe.com/chapter-15.html 电子邮箱系统 foxmail MUA 发送 MT ...

  5. spring Ioc Aop整合

    之前用DWP项目做spring的IOC,xml总是提示有问题,之后改用maven通过. 之后将这一块的内容补充. 仔细考虑一下spring 的IOC是无处不在的,演示Aop也需要依赖spring的IO ...

  6. php开启CURL支持

    window下安装php_curl支持 1. 找到php.ini 修改extension=php_curl.dll 把前面的分号去掉2. 把 php_curl.dll libeay32.dll ssl ...

  7. 日志记录~log4.net

    1. 添加Log4net引用 2. 添加配置文件 Log.config <?xml version="1.0" encoding="utf-8"?> ...

  8. 请问具体到PHP的代码层面,改善高并发的措施有哪些

    1.今天被问一个问题:请问具体到PHP的代码层面,改善高并发的措施有哪些? 面对高并发问题我首先想到的是集群.缓存(apt.redis.mem.内存...),但具体到PHP代码层面除了想到队列.减少网 ...

  9. 纯css实现宽度自适应,高度与宽度成比例

    html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...

  10. UTC时间和各个地区的时间到底是怎么回事

    就不分析了,直接写结论 1.同一个时间点全球各地的时间戳是一致的 2.同一个时间戳在不同的时区对应不同的时间   依北京时间为例: 当前时间为 Tue Jan 23 2018 19:02:11 GMT ...