Struts2+jquery.form.js实现图片与文件上传的方法


Posted in Javascript onMay 05, 2016

本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考,具体如下:

jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站:http://plugins.jquery.com/form/

结合Struts2三步轻松实现文件上传

一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用场了。

一、HTML

导入本jS到页面、写好上传表单

<script type="text/javascript" src="/js/jquery.form.js"></script>
<!—图片上传 -->
<s:form id="picForm" name="picForm" action="/notice/showAddNotice.action" method="post" 
  enctype="multipart/form-data">
    <input type="file" name="pic" size="30"/><input type="submit" value="上传"/>
</s:form>

二、JS

// 为表单绑定异步上传的事件
$(function(){
    // 为表单绑定异步上传的事件
    $("#picForm").ajaxForm({
    url : "${pageContext.request.contextPath}/notice/uploadPic.action", // 请求的url
    type : "post", // 请求方式
    dataType : "text", // 响应的数据类型
    async :true, // 异步
    success : function(imageUrl){
        //alert(imageUrl);
    },
    error : function(){
        alert("数据加载失败!");
    }
});
// 为提交按钮绑定事件
$("#saveBtn").click(function(){
    // 表单输入较验
    var title = $("#title");
    // 获取textarea的内容
    var content = tinyMCE.get('content').getContent();
    var msg = "";
    if ($.trim(title.val()) == ""){
        msg = "公告标题不能为空!";
        title.focus();
    }else if ($.trim(content) == ""){
        msg = "内容不能为空!";
    }
    msg = "";
    if (msg != ""){
        alert(msg);
    }else{
        // 表单提交
        $("#noticeForm").submit();
    }
});

三、Struts2Action

public class uploadPicAjax extends AbstractAjaxAction {
    private static final long serialVersionUID = -4742151106080093662L;
    /** Struts2文件上传的三个属性 */
    private File pic;
    private String picFileName;
    private String picContentType;
    @Override
    protected String getJson() throws Exception {
        //获取项目部署的路径
        String realPath = ServletActionContext.getServletContext()
                .getRealPath("/images/notice");
        //生成新的文件名
        String newFileName = UUID.randomUUID().toString()+"."
                +FilenameUtils.getExtension(picFileName);// 获取文件的后缀名 aa.jpg --> jpg
        FileUtils.copyFile(pic, new File(realPath + File.separator + newFileName));
        return "/images/notice/" + newFileName;
    }
    /** setter and getter method **/
    ......
}

四、配置Struts2.xml

<!-- 图片的异步上传 -->
<action name="uploadPic" class="com.wise.hrm.action.notice.uploadPicAjax">
</action>

好了,从页面到后台就已经写完了。这样就可以上传了。完毕!

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
使用jquery.form.js实现图片上传的方法
May 05 #Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 #Javascript
浅析JS异步加载进度条
May 05 #Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 #Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 #Javascript
一分钟理解js闭包
May 04 #Javascript
学JavaScript七大注意事项【必看】
May 04 #Javascript
You might like
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
python利用正则表达式提取字符串
2016/12/08 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
2014年中秋节活动总结
2014/08/29 职场文书
小学教育见习报告
2014/10/31 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
学习心得体会
2019/06/20 职场文书