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 面向对象编程
Oct 28 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
浅谈JS的二进制家族
May 09 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版
2006/10/09 PHP
PHP+DBM的同学录程序(4)
2006/10/09 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
js树形控件脚本代码
2008/07/24 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
浅析Python多线程下的变量问题
2015/04/28 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
如何利用find命令查找文件
2016/11/18 面试题
刚毕业大学生自荐信范文
2014/02/20 职场文书
捐书活动总结
2014/05/04 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
企业催款函范本
2015/06/24 职场文书
运动会新闻稿
2015/07/17 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
MySQL学习必备条件查询数据
2022/03/25 MySQL
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL