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, //一般设置为falsefileElementId: 'imgTitle', //文件上传空间的id属性  <input type="file" id="file" name="file" />dataType: 'JSON', //返回值类型 一般设置为jsondata:{'oldImageString':imgName},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 李晓晴

ajax页面无刷新上传文件相关推荐

Sring3MVC页面无刷新上传文件
Sring3MVC页面无刷新上传文件首先,这个框架是利用Ajax与Ctroller进行表单提交和数据交互的,但是Ajax是无法支持File上传的,所以在这里我使用了隐藏的Iframe来做文件上传的数 ...
jQuery+php+ajax实现无刷新上传文件功能
2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...
iframe实现页面无刷新上传文件(PHP)----备忘
之前做一个文件上传的,由于那段时间写ajax比较多,所以就想利用Ajax来实现,后来发现,Ajax没法实现文件上传, 后来百度之,这里做个备忘. 提示:利用form表单的target属性和iframe ...
jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
利用iframe无刷新上传文件的坑
利用iframe无刷新上传文件的坑原文:利用iframe无刷新上传文件的坑页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用for ...
php 无刷新上传,php 无刷新上传文件的代码
php 无刷新上传文件. 有兴趣的朋友,可以参考下:php iframe无刷新上传文件的实现代码 . 1.上传页面复制代码代码示例: 无刷新上传文件 function startUpload() ...
基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
使用iframe模拟无刷新上传文件。
最近一直在研究使用AJAX技术上传文件,也找了网上的一些源码,发现基本上都是使用iframe模拟实现的. 其实AJAX是无法实现上传文件的,那么我们该怎么实现既能不刷新当前页面,又能在用户上传文档完毕 ...
ASP.NET 无刷新上传文件
这些天一直在做一个无刷新的文件上传功能,现在也总算是做好.可以说是是几经波折吧,开始一直想用AJAX的思路去实现,没想到费了很多时间最后还是徒劳!用ADODB.STREAM 应该也是可以把表单的文件P ...

ajax页面无刷新上传文件

ajax页面无刷新上传文件相关推荐

最新文章

热门文章