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 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
jquery中radio checked问题
Mar 16 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
使用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函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
AngularJS 指令详细介绍
2016/07/27 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python中np是做什么的
2020/07/21 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
法定代表人资格证明书
2014/09/11 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
党员民主生活会材料
2014/12/15 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
SQL Server中使用表变量和临时表
2022/05/20 SQL Server
python语言中pandas字符串分割str.split()函数
2022/08/05 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技