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 存在陷阱 删除某一区域所有节点
May 10 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 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中的登陆login实例代码
2016/06/20 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
Bootstrap精简教程
2015/11/27 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
js异步编程小技巧详解
2017/08/14 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
简述JS控制台的使用
2018/07/15 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python实现批量下载文件
2015/05/17 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python添加菜单图文讲解
2019/06/04 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
增员口号大全
2014/06/18 职场文书
经理岗位职责
2015/02/02 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
入党转正申请报告
2015/05/15 职场文书
开学第一周总结
2015/07/16 职场文书
Golang解析JSON对象
2022/04/30 Golang