• 技术文章 >web前端 >js教程

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

    2016-05-16 15:02:10原创895
    本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考,具体如下:

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

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

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

    一、HTML

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

    
    
    
        
    
    
    

    二、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

    
    
    
    
    

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

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:javaScript中的原型解析【推荐】_javascript技巧 下一篇:实例讲解JavaScript的Backbone.js框架中的View视图_基础知识
    大前端线上培训班

    相关文章推荐

    • javascript如何获取当前方法名• javascript怎么设置p的值• javascript怎么检测变量是否存在• JavaScript如何获取HTML元素• javascript怎么将字符转换成数字

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网