上一篇说到怎样在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

<?

xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.devMode" value="true" /> <!-- 开发模式 -->
<package name="up" extends="json-default">
<default-action-ref name="index"></default-action-ref>
<action name="index">
<result>/index.jsp</result>
</action>
<action name="upload" class="com.etoak.action.UploadAction">
<result name="success" type="json">
<param name="contentType">text/plain</param>
</result>
</action>
<action name="delFile" class="com.etoak.action.DelFileAction">
<result type="json"></result>
</action>
</package>
</struts>

UploadAction:

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

package com.etoak.action;
import java.io.File;
import java.util.List;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.omg.CORBA.PUBLIC_MEMBER; import com.etoak.util.UUIDGenerator;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
private File myfile;
private String myfileFileName;
// 又一次命名后的文件全名
private String newFileName;
/*
* public File getMyFile() { return myFile; }
*/
public void setMyfile(File myfile) {
this.myfile = myfile; }
/*
* public String getMyfileFileName() { return myfileFileName; }
*/
public void setMyfileFileName(String myfileFileName) {
this.myfileFileName = myfileFileName;
}
public String getNewFileName() {
return newFileName;
}
/*
* public void setNewFileName(String newFileName) { this.newFileName =
* newFileName; }
*/
@Override
public String execute() throws Exception {
newFileName = new UUIDGenerator().generate()
+ myfileFileName.substring(myfileFileName.lastIndexOf("."));
String path = ServletActionContext.getServletContext().getRealPath(
"/image")
+ "/" + newFileName;
// newFileName自带getter方法,所以会加入到json中。返回前台
File destFile = new File(path);
// System.out.println(path);
FileUtils.copyFile(myfile, destFile);
return this.SUCCESS;
} }

DelFileAction:

package com.etoak.action;
import java.io.File;
import java.util.List;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.omg.CORBA.PUBLIC_MEMBER; import com.etoak.util.UUIDGenerator;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
private File myfile;
private String myfileFileName;
// 又一次命名后的文件全名
private String newFileName;
/*
* public File getMyFile() { return myFile; }
*/
public void setMyfile(File myfile) {
this.myfile = myfile; }
/*
* public String getMyfileFileName() { return myfileFileName; }
*/
public void setMyfileFileName(String myfileFileName) {
this.myfileFileName = myfileFileName;
}
public String getNewFileName() {
return newFileName;
}
/*
* public void setNewFileName(String newFileName) { this.newFileName =
* newFileName; }
*/
@Override
public String execute() throws Exception {
newFileName = new UUIDGenerator().generate()
+ myfileFileName.substring(myfileFileName.lastIndexOf("."));
String path = ServletActionContext.getServletContext().getRealPath(
"/image")
+ "/" + newFileName;
// newFileName自带getter方法。所以会加入到json中,返回前台
File destFile = new File(path);
// System.out.println(path);
FileUtils.copyFile(myfile, destFile);
return this.SUCCESS;
} }

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery异步上传</title>
</head>
<body>
<input type="file" name="myfile" id="myfile" />
<input type="button" value="上传" id="upload" />
<div id="files" ></div>
<script type="text/javascript" src="script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script/json2.js"></script>
<script type="text/javascript" src="script/ajaxfileupload.js"></script><!-- jquery不支持上传 -->
<script type="text/javascript">
$(document).ready(function(){
//上传文件。点击上传后
$("#upload").click(function(){
var $myfile = $("#myfile").val();
//检查用户是否上传了文件
if($myfile!=""){
//開始调用ajax异步请求
//此方法由ajaxfileupload.js提供
$.ajaxFileUpload({
url:"upload.action",
type:"post",
//提交上传文件的控件
fileElementId:"myfile",
//是否支持跨域传输
//默认不支持
secureuri:false,
//由于不能直接解析json,所以必须依照字符串
dataType:"text",
success:function(data){
alert(data);
//将json数据从标签中取出
var text = $(data).html();
//转换为js对象
var obj = JSON.parse(text);
//获得文件信息
var filename = obj.newFileName;
$("#files").append("<img name='"+filename+"' src='image/"+filename+"' style='width:200px;height:100px' />");
//解除img元素上全部绑定的事件
$("img").unbind();
$("img").click(function(){
//拿取图片name属性
var fn = $(this).attr("name");
if(confirm("确定删除?")){
$.ajax({
url:"delFile.action",
type:"post",
data:"filename="+fn,
dataType:"json",
success:function(data){
if(data.flag){
alert("删除成功");
//拿到32位随机码
var uuid = fn.substring(0,fn.indexOf("."));
//拿取img元素name属性开头符合uuid的元素
$("img[name^="+uuid+"]").remove();
}
} });
} });
},
error:function(err){
alert(err.status);
}
});
}
}); });
</script>
</body>
</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. ISAM Indexed Sequential Access Method 索引顺序存取方法

    ISAM Indexed Sequential Access Method 索引顺序存取方法 学习了:https://baike.baidu.com/item/ISAM/3013855 是IBM发展起 ...

  2. hive 配置注意事项及初始化hive 元数据

    今天配置hive 犯了一个问题:下载的hive tar.gz 里的conf文件夹仅仅有一个 hive-default.xml.template,于是我就cp  了一份命名为:hive-default. ...

  3. Android学习笔记之ProgressBar案例分析

    (1) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  4. win10怎样开启自带虚拟机

    win10和win8一样.都有自带的虚拟机,可是功能没有一安装上就打开,非常多喜欢用自带的东西,那么win10自带的虚拟机怎样开启呢? 首先要找到控制面板,我们右键点击開始button,我们找到&qu ...

  5. windows下PTAM的编译

    前些日子在研究PTAM,以下首先说说PTAM的编译过程,我在XP几WIN7搭配vs2010中均已測试过,都能够执行. 首先下载编译PTAM所必须的库文件.下载地址我会给出 PTAM(PTAM.zip) ...

  6. zzulioj--1637--Happy Thanksgiving Day - WoW yjj!(水)

    1637: Happy Thanksgiving Day - WoW yjj! Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 104  Solved: ...

  7. 谷歌浏览器 —— 快捷键(vimium:像使用 vim 一样操作当前页面)

    Chrome 键盘快捷键 拷贝当前页面内的某链接: 首先输入 y(进入 yank 模式),输入 f,为当前页面内的全部超链接编号,然后输入待拷贝的链接编号,即可将该链接复制到粘贴板: 1. 使用 vi ...

  8. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  9. 动画view

    1:view动画 @1:xml中 alph:渐变透明度动画效果 scale:渐变尺寸伸缩动画效果 translate:画面转换位置移动动画效果 rootate:画面转移旋转动画效果 @2:JavaCo ...

  10. c#将http调用返回额json中的有关中文的unicode转换为中文

    c#将http调用返回额json中的有关中文的unicode转换为中文 中文转Unicode:HttpUtility.UrlEncodeUnicode(string str);转换后中文格式:&quo ...