struts2+hibernate3+html5+jquery+ajax+gson进行异步的上传文件处理
2016-08-01 19:00
302 查看
前台关键代码:
<input type="file" id="picture" style="display:inline;" name="picture" accept="image/*"/>
<button id="uploadBtn" type="button" class="uk-button uk-button-danger" onclick="userphoto_upload()">
<span id="uploadInfo">立即上传</span>
<span id=”uploadOk“ class="" aria-hidden="true" style="display: none;"></span>
</button>
<script type="text/javascript">
function userphoto_upload() {
if($("#picture").val().trim() === "")
alert("请选择图片后进行上传");
else {
$("#uploadBtn").attr("disabled", "true");
$("#uploadInfo").text("图片正在玩命上传!请稍后...");
var fd = new FormData();
fd.append("picture", $("#picture").get(0).files[0]);
$.ajax({
url: "uploadPicture!uploadPicture.action",
type: "POST",
dataType: "json",
processData: false,
contentType: false,
data: fd,
success: function(data) {
$("#uploadBtn").removeAttr("disabled");
if(data.status) {
$("#userImg").attr("src", data.pictureUrl);
$("#uploadInfo").text("上传成功!");
$("#uploadOk").attr("style", "display: inline;");
$("#uploadOk").attr("class", "glyphicon glyphicon-ok");
} else {
$("#uploadInfo").text("上传失败!");
$("#uploadOk").attr("style", "display: inline;");
$("#uploadOk").attr("class", "glyphicon glyphicon-remove");
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#uploadBtn").removeAttr("disabled");
$("#uploadInfo").text("上传失败!");
$("#uploadOk").attr("style", "display: inline;");
$("#uploadOk").attr("class", "glyphicon glyphicon-remove");
}
});
}
}
</script>
struts.xml中的配置:
<!-- 设置最大上传文件的大小 2M-->
<constant name="struts.multipart.maxSize" value="2097152" />//struts2中默认上传的大小就是2M,这里额外写出,方便以后增加修改
<!-- 配置临时存储地址 -->
<constant name="struts.multipart.saveDir" value="/tmp"/>
<action name="uploadPicture" class="com.chuangyejia.ajax.UploadUserPicture" />
上传的action类:
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.struts2.ServletActionContext;
import com.chuangyejia.bean.User;
import com.chuangyejia.factory.ServiceFactory;
import com.chuangyejia.service.IUserService;
import com.chuangyejia.tools.UploadFileUtil;
import com.google.gson.JsonObject;
import com.opensymphony.xwork2.ActionSupport;
public class UploadUserPicture extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
* 图片存入数据库中的地址
*/
private static final String DB = ServletActionContext.getServletContext().getInitParameter("uploadPictureUrlVir");
/**
* 图片实际存入硬盘的地址
*/
private static final String DISK = ServletActionContext.getServletContext().getInitParameter("uploadPictureUrlDisk");
/**
* 图片的默认地址
*/
private static final String DEFAULT = ServletActionContext.getServletContext().getInitParameter("uploadPictureUrlDef");
private File picture;
private String pictureFileName;
private String pictureContentType;
public File getPicture() {
return picture;
}
public void setPicture(File picture) {
this.picture = picture;
}
public String getPictureFileName() {
return pictureFileName;
}
public void setPictureFileName(String pictureFileName) {
this.pictureFileName = pictureFileName;
}
public String getPictureContentType() {
return pictureContentType;
}
public void setPictureContentType(String pictureContentType) {
this.pictureContentType = pictureContentType;
}
public void uploadPicture() {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
JsonObject jo = new JsonObject();
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
System.out.println("用户上传头像时,获取输出的管道出错");
e.printStackTrace();
}
/**
* 保证传输过来的是图片
*/
if(pictureContentType.split("/")[0].equals("image")) {
/**
* 自定义上传的图像名
*/
pictureFileName = UUID.randomUUID().toString().replace("-", "") + ".jpg";
/**
* 获取存入硬盘的具体地址
*/
String url = DISK + pictureFileName;
/**
* 根据全路径,将文件创建出来。
*/
File file = new File(url);
/**
* 标识,创建文件是否成功
* 使用上传文件工具类
*/
boolean create = UploadFileUtil.justDoIt(picture, file);
/**
* 如果创建成功,则进行往数据库用户表中更新
*/
if(create) {
HttpSession session = ServletActionContext.getRequest().getSession();
User user = (User)session.getAttribute("user");
/**
* 先将之前的头像保存出来
*/
String oldPictureUrl = user.getUserPhoto();
user.setUserPhoto(DB + pictureFileName);
IUserService ius = ServiceFactory.createUserService();
boolean result = ius.updateUser(user);
if(result) {
session.setAttribute("user", user);
jo.addProperty("status", true);
jo.addProperty("pictureUrl", DB + pictureFileName);
/**
* 插入成功后,将原图像删除
*/
if(!oldPictureUrl.equals(DEFAULT)) {
String oldPictureName = oldPictureUrl.split("/")[3];
String oldPictureDisk = DISK + oldPictureName;
File oldFile = new File(oldPictureDisk);
if(oldFile.exists())
oldFile.delete();
}
} else {
user.setUserPhoto(oldPictureUrl);
jo.addProperty("status", false);
if(file.exists())
file.delete();
}
} else
jo.addProperty("status", false);
} else
jo.addProperty("status", false);
out.println(jo.toString());
out.flush();
out.close();
}
}该类中使用了自己编写的文件处理工具类:
到这里就一起ok了!
<input type="file" id="picture" style="display:inline;" name="picture" accept="image/*"/>
<button id="uploadBtn" type="button" class="uk-button uk-button-danger" onclick="userphoto_upload()">
<span id="uploadInfo">立即上传</span>
<span id=”uploadOk“ class="" aria-hidden="true" style="display: none;"></span>
</button>
<script type="text/javascript">
function userphoto_upload() {
if($("#picture").val().trim() === "")
alert("请选择图片后进行上传");
else {
$("#uploadBtn").attr("disabled", "true");
$("#uploadInfo").text("图片正在玩命上传!请稍后...");
var fd = new FormData();
fd.append("picture", $("#picture").get(0).files[0]);
$.ajax({
url: "uploadPicture!uploadPicture.action",
type: "POST",
dataType: "json",
processData: false,
contentType: false,
data: fd,
success: function(data) {
$("#uploadBtn").removeAttr("disabled");
if(data.status) {
$("#userImg").attr("src", data.pictureUrl);
$("#uploadInfo").text("上传成功!");
$("#uploadOk").attr("style", "display: inline;");
$("#uploadOk").attr("class", "glyphicon glyphicon-ok");
} else {
$("#uploadInfo").text("上传失败!");
$("#uploadOk").attr("style", "display: inline;");
$("#uploadOk").attr("class", "glyphicon glyphicon-remove");
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#uploadBtn").removeAttr("disabled");
$("#uploadInfo").text("上传失败!");
$("#uploadOk").attr("style", "display: inline;");
$("#uploadOk").attr("class", "glyphicon glyphicon-remove");
}
});
}
}
</script>
struts.xml中的配置:
<!-- 设置最大上传文件的大小 2M-->
<constant name="struts.multipart.maxSize" value="2097152" />//struts2中默认上传的大小就是2M,这里额外写出,方便以后增加修改
<!-- 配置临时存储地址 -->
<constant name="struts.multipart.saveDir" value="/tmp"/>
<action name="uploadPicture" class="com.chuangyejia.ajax.UploadUserPicture" />
上传的action类:
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.struts2.ServletActionContext;
import com.chuangyejia.bean.User;
import com.chuangyejia.factory.ServiceFactory;
import com.chuangyejia.service.IUserService;
import com.chuangyejia.tools.UploadFileUtil;
import com.google.gson.JsonObject;
import com.opensymphony.xwork2.ActionSupport;
public class UploadUserPicture extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
* 图片存入数据库中的地址
*/
private static final String DB = ServletActionContext.getServletContext().getInitParameter("uploadPictureUrlVir");
/**
* 图片实际存入硬盘的地址
*/
private static final String DISK = ServletActionContext.getServletContext().getInitParameter("uploadPictureUrlDisk");
/**
* 图片的默认地址
*/
private static final String DEFAULT = ServletActionContext.getServletContext().getInitParameter("uploadPictureUrlDef");
private File picture;
private String pictureFileName;
private String pictureContentType;
public File getPicture() {
return picture;
}
public void setPicture(File picture) {
this.picture = picture;
}
public String getPictureFileName() {
return pictureFileName;
}
public void setPictureFileName(String pictureFileName) {
this.pictureFileName = pictureFileName;
}
public String getPictureContentType() {
return pictureContentType;
}
public void setPictureContentType(String pictureContentType) {
this.pictureContentType = pictureContentType;
}
public void uploadPicture() {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
JsonObject jo = new JsonObject();
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
System.out.println("用户上传头像时,获取输出的管道出错");
e.printStackTrace();
}
/**
* 保证传输过来的是图片
*/
if(pictureContentType.split("/")[0].equals("image")) {
/**
* 自定义上传的图像名
*/
pictureFileName = UUID.randomUUID().toString().replace("-", "") + ".jpg";
/**
* 获取存入硬盘的具体地址
*/
String url = DISK + pictureFileName;
/**
* 根据全路径,将文件创建出来。
*/
File file = new File(url);
/**
* 标识,创建文件是否成功
* 使用上传文件工具类
*/
boolean create = UploadFileUtil.justDoIt(picture, file);
/**
* 如果创建成功,则进行往数据库用户表中更新
*/
if(create) {
HttpSession session = ServletActionContext.getRequest().getSession();
User user = (User)session.getAttribute("user");
/**
* 先将之前的头像保存出来
*/
String oldPictureUrl = user.getUserPhoto();
user.setUserPhoto(DB + pictureFileName);
IUserService ius = ServiceFactory.createUserService();
boolean result = ius.updateUser(user);
if(result) {
session.setAttribute("user", user);
jo.addProperty("status", true);
jo.addProperty("pictureUrl", DB + pictureFileName);
/**
* 插入成功后,将原图像删除
*/
if(!oldPictureUrl.equals(DEFAULT)) {
String oldPictureName = oldPictureUrl.split("/")[3];
String oldPictureDisk = DISK + oldPictureName;
File oldFile = new File(oldPictureDisk);
if(oldFile.exists())
oldFile.delete();
}
} else {
user.setUserPhoto(oldPictureUrl);
jo.addProperty("status", false);
if(file.exists())
file.delete();
}
} else
jo.addProperty("status", false);
} else
jo.addProperty("status", false);
out.println(jo.toString());
out.flush();
out.close();
}
}该类中使用了自己编写的文件处理工具类:
UploadFileUtil: import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; /** * 上传文件工具类 * @author Diamond * */ public class UploadFileUtil { /** * 这里的上传图片的工具类,只提供把struts2接收的文件,传递给自己创建的文件 * @param picture struts2接收的文件 * @param file 自己根据需求地址创建的文件 * @return */ public static boolean justDoIt(File picture, File file) { BufferedInputStream bis = null; BufferedOutputStream bos = null; /** * 标识,创建文件是否成功 */ boolean create = false; try { bis = new BufferedInputStream(new FileInputStream(picture)); bos = new BufferedOutputStream(new FileOutputStream(file)); byte[] bts=new byte[1024]; int length = -1; while((length = bis.read(bts)) != -1) { bos.write(bts, 0, length); } bis.close(); bos.flush(); bos.close(); create = true; } catch (IOException e) { create = false; e.printStackTrace(); } finally { try { if(bis != null) { bis.close(); bis = null; } if(bos != null) { bos.flush(); bos.close(); bos = null; } } catch(final IOException e) { e.printStackTrace(); } } return create; } }
到这里就一起ok了!
相关文章推荐
- Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法
- layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
- 异步上传文件以及php对文件的处理
- zf-安徽桐城关于(资源中心-数据录入)上传文件后没有进行处理Excel文件的原因
- Ajax异步文件上传与NodeJS express服务端处理
- java 实现html5多文件选择上传_h5多文件上传_ajax异步多文件上传_java处理多文件上传
- ajax请求二进制流进行处理(ajax异步下载文件)
- ajax实战:(ajax异步下载文件)请求二进制流进行处理
- JAVA 使用springMVC 上传多张图片或文件,并对图片进行按比例缩放处理
- 如何利用formData进行异步提交上传文件
- 没有Form的情况下,关于AJax异步上传文件处理
- 使用libcurl进行异步并发访问与文件上传
- spring mvc源码-》MultipartReques类-》主要是对文件上传进行的处理,在上传文件时,编码格式为enctype="multipart/form-data"格式,以二进制形式提交数据,提交方式为post方式。
- 使用swfupload进行异步文件上传(java版)
- 使用FormData对包含文件类型的form表单进行异步提交(文件上传)并配置回调
- java web中监听本地磁盘文件,并进行上传,复制,处理等
- ASP.NET MVC 文件异步上传问题处理
- AjaxFileUpLoad 文件异步上传Demo(模仿官方网站,后台使用.net一般处理程序)
- 有关使用异步请求进行文件上传的方法
- 一个页面中上传文件,另一个页面进行处理