Struts2学习(四)利用ajax异步上传
上一篇说到怎样在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异步上传的更多相关文章
- 利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载
利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载 1.页面显示代码 <%@ page language="java" import="java ...
- 基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
- html5+php实现文件的断点续传ajax异步上传
html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...
- java使用xheditor Ajax异步上传错误
java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...
- Spring使用ajax异步上传文件
单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- ajax异步上传到又拍云的实例教程
作者:白狼 出处:www.manks.top/article/async_upload_to_upyun 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否 ...
- ajax 异步上传视频带进度条并提取缩略图
最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...
随机推荐
- NAT&Port Forwarding&Port Triggering
NAT Nat,网络地址转换协议.主要功能是实现局域网内的本地主机与外网通信. 在连接外网时,内部Ip地址须要转换为网关(一般为路由器Ip地址)(port号也须要对应的转换) ...
- java 递归实现删除或查询指定目录下的全部文件
/** * 递归列举盘符下的全部文件的名称,如E:\HeartIsland * * @author HeartIsland * */ public class FileListDemo { /** * ...
- 【转】iOS多语言本地化(国际化)设置
原文网址:http://www.jianshu.com/p/2b7743ae9c90 讨论的iOS应用中的多语言设置,Ok 一般是两种情况: 1.根据当前设备语言自动切换显示 2.在应用中可进行语言设 ...
- Linux就该这么学 20181011(第十五章邮件)
参考链接:https://www.linuxprobe.com. https://www.linuxprobe.com/chapter-15.html 电子邮箱系统 foxmail MUA 发送 MT ...
- spring Ioc Aop整合
之前用DWP项目做spring的IOC,xml总是提示有问题,之后改用maven通过. 之后将这一块的内容补充. 仔细考虑一下spring 的IOC是无处不在的,演示Aop也需要依赖spring的IO ...
- php开启CURL支持
window下安装php_curl支持 1. 找到php.ini 修改extension=php_curl.dll 把前面的分号去掉2. 把 php_curl.dll libeay32.dll ssl ...
- 日志记录~log4.net
1. 添加Log4net引用 2. 添加配置文件 Log.config <?xml version="1.0" encoding="utf-8"?> ...
- 请问具体到PHP的代码层面,改善高并发的措施有哪些
1.今天被问一个问题:请问具体到PHP的代码层面,改善高并发的措施有哪些? 面对高并发问题我首先想到的是集群.缓存(apt.redis.mem.内存...),但具体到PHP代码层面除了想到队列.减少网 ...
- 纯css实现宽度自适应,高度与宽度成比例
html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...
- UTC时间和各个地区的时间到底是怎么回事
就不分析了,直接写结论 1.同一个时间点全球各地的时间戳是一致的 2.同一个时间戳在不同的时区对应不同的时间 依北京时间为例: 当前时间为 Tue Jan 23 2018 19:02:11 GMT ...