ajax页面无刷新上传文件

最近在研究struts2文件上传，感觉这块无论是做企业网站还是做系统都用的挺多的，尤其是图片上传。但是上传我们又有几种方式，一种是表单提交，一种是ajax无刷新上传。

这次我要介绍的就是struts2+ajax无刷新上传图片，将图片存储在本地，图片将以路径的形式保存在数据库里，我们在读取的时候只需要读取图片路径，系统就会去所在路径找到对应图片并显示。

我们在做图片上传时除了基础的jar包外，还需用到struts2-json-plugin.jar。我用的是2.3.24版的。

本系统前端需要引入ajaxfileupload.js和jquery.min.js两个js控件。

正式流程如下：前端页面显示有file控件，点击file控件，找到上传图片，执行onchange事件，通过strtus的json在struts.xml中配置，然后在action中写入对应uploadfile方法，返回imageString图片路径。

关于前台页面的处理：

页面显示写法如下，a标签中class为样式,input的type为file文件类型：

<td colspan="2"><a href="javascript:;" class="a-upload">
<input type="file" name="imgTitle" id="imgTitle"  onchange="uploadFile();"                   accept="image/gif,image/jpeg,image/jpg,image/png">点击这里上传文件</a>
<div id="images"></div></td>

样式如下：

.input{ border:1px solid #dbdbdb; width:256px; height:25px; line-height:25px;}
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #993300;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload  input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}

点击onchange，执行js如下：

function uploadFile() {
if ($("#imgTitle").val().length > 0) {
ajaxFileUpload();
}
else {
alert("请选择图片");
}
}
function ajaxFileUpload() {
var imgName = $("input[name='designProject.imgTitle']").val();
$.ajaxFileUpload({
url: 'admin/uploadFile', //用于文件上传的服务器端请求地址
type: 'post',
secureuri: false, //一般设置为false
fileElementId: 'imgTitle', //文件上传空间的id属性  <input type="file" id="file" name="file" />
dataType: 'JSON', //返回值类型 一般设置为json
data:{'oldImageString':imgName},

4000
success: function (imageString, status)  //服务器成功响应处理函数
{
if(""!=imageString && "0"==imageString.substr(0,1)) {
alert(imageString.substr(1,imageString.length-1));
return false;
}
imageString = imageString.replace(/\\/g, '');
var aa="<img src="+imageString+" width='150px;' height='150px;' />";
aa += "<input type='hidden' value="+imageString+" id='imgTitle' name='designProject.imgTitle' />";
$("#images").html(aa);
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert("error="+e);
}
});
return false;
}

Struts2写法如下注意是json格式：

<package name="admin_json" namespace="/admin" extends="json-default">
<action name="uploadFile" class="designAction" method="uploadFile">
<result type="json">
<param name="root">imageString</param>
<param name="contentType">text/html</param>
</result>
</action>
</package>

Action写法如下：

private String imageString;
private File imgTitle;
private String imgTitleFileName; // 文件名称
private String imgTitleContentType; // 文件类型
public String uploadFile() {
try {           ServletActionContext.getRequest().setCharacterEncoding("UTF-8");
String realpath = this.getClass().getClassLoader().getResource("").getPath();
realpath = realpath.split("WEB-INF/classes")[0] + "uploadFile/";
File savedir = new File(realpath);
if (!savedir.getParentFile().exists())
savedir.getParentFile().mkdirs();
String looppath = "uploadFile/";
Date datenew = new Date();
SimpleDateFormat simpleDateFormatnew = new SimpleDateFormat("yyyyMMddhhmmss");
imageString = "";
if (imgTitle != null) {
int last = imgTitleFileName.lastIndexOf(".");
String type = imgTitleFileName.substring(last);
if (!".jpg".equals(type.toLowerCase()) && !".jpeg".equals(type.toLowerCase())
&& !".gif".equals(type.toLowerCase()) && !".png".equals(type.toLowerCase())) {
imageString = "0上传图片格式不正确，只能是jpg，gif，jpeg，png格式";
return SUCCESS;
}
imgTitleFileName = simpleDateFormatnew.format(datenew) + "_00" + type;
File savefile = new File(savedir, imgTitleFileName);
FileUtils.copyFile(imgTitle, savefile);
imageString = looppath + imgTitleFileName;
}catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;

Java类中全局变量需要有对应的get和set方法。最后返回前端的为imageString图片路径，该图片路径用于保存至数据库的路径。需json传值至前端，在form表单提交整体信息的时候提交即可。

created by 李晓晴