struts2+jquery+ajax实现上传&&校验实例

一直以为ajax不能做上传,直到最近看了一些文章。代码和相关配置如下:

js代码:

      

  <script>

        //ajax 无刷新上传文件
        function ajaxFileUpload() {
            //判断是否选择文件
            if($("#uploadFile").val() == null || $("#uploadFile").val()==""){
                alert("请选择需要上传的文件!");
                return;
            }
            //判断后缀名
            var filepath=$("#uploadFile").val();
            var extStart=filepath.lastIndexOf(".");
            var ext=filepath.substring(extStart,filepath.length).toUpperCase();
            if(".xls".toUpperCase() !=ext ){
                alert("只能上传Excel97-2003工作簿文件(xls)");
                return false;
            }
            //判断文件大小
            var file = $(‘#uploadFile‘).get(0).files[0];
            if (file) {
                var fileSize = 0;
                if (file.size > 2*1024 * 1024) {
                    alert("上传的文件大小不能超过2MB,请核对后重试!");
                    return false;
                }
            }
            $("#loading")
                    .ajaxStart(function () {
                        $(this).show();
                    })//开始上传文件时显示一个图片
                    .ajaxComplete(function () {
                        $(this).hide();
                    });//文件上传完成将图片隐藏起来

            $.ajaxFileUpload
            (
                    {
                        url: ‘<%=request.getContextPath()%>/server/doUploadAndInsert.action‘,//用于文件上传的服务器端请求地址
                        secureuri: false,//一般设置为false
                        fileElementId: ‘uploadFile‘,//文件上传空间的id属性  <input type="file" id="file" name="file" />
                        dataType: ‘json‘,//返回值类型 一般设置为json
                        success: function (result) {
                            var msgBean = result;
                            alert(msgBean.msgText);
                        }
                    });
            return false;

        }
    </script>

html代码:

<div id="page-content" class="clearfix" style="padding-top: 20">
            <form id="myform" enctype="multipart/form-data" method="post"
                  action="<%=request.getContextPath()%>/server/doUploadAndInsert.action">
                <span style="font-size: 15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
                    选择文件<span style="color: #c91523">(*.xls格式)</span>: </span>
                <input id="uploadFile" type="file" style="font-size: 15px" label="浏览" name="uploadFile" accept="application/xls"></file>
            </form>
            <input type="button" style="margin: 0 0 20 370;font-size: 15px" class="btn btn-large btn-pink save-right"
                   value="导入" onclick="return ajaxFileUpload();"/>
        </div>

struts2 配置:

    <package name="server" extends="interceptorPackge" namespace="/server">
        <action name="doUploadAndInsert" class="serverBaseInfoAction" method="doUploadAndInsert" >
            <result type="plainText" />
            <param name="savePath">uploadTemp</param>
        </action>   </package> 

后端struts2 action代码:

 // 上传文件所需属性
    private String title;
    private File uploadFile;
    private String uploadFileContentType;
    private String SavePath;
    private String uploadFileFileName;
    Log log = LogFactory.getLog(this.getClass());public String doUploadAndInsert() throws Exception {
        PrintWriter out = null;
        MsgBean msg = new MsgBean();
        try {
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setContentType("text/html;charset=utf-8");
            out = response.getWriter();
            if(getUploadFile().length()>2097152){
                msg.setMsgName("SysDefectAction_doDefUploadAndInsert_fail");
                msg.setMsgText(getUploadFileFileName()+"上传失败,文件太大。\r\n请不要上传超过2048KB的文件");
                out.write(JSON.toJSONString(msg));
                out.flush();
                return null;
            }
            //后缀名限制
            String suffixName = getUploadFileFileName().split("\\.")[1];
            if(!"xls".equalsIgnoreCase(suffixName)){
                msg.setMsgName("SysDefectAction_doDefUploadAndInsert_fail");
                msg.setMsgText(getUploadFileFileName()+"上传失败,错误的文件格式!");
                out.write(JSON.toJSONString(msg));
                out.flush();
                return null;
            }

            UUID uuid = UUID.randomUUID();
            ServletContext servletContext = (ServletContext) ActionContext.getContext().get(ServletActionContext.SERVLET_CONTEXT);
            String rootPath = servletContext.getRealPath("/");
            File folder = new File(rootPath + "\\" + getSavePath());
            if (!folder.exists()) {
                folder.mkdir();
            }
            FileOutputStream fileOutputStream = new FileOutputStream(rootPath + "\\" + getSavePath() + "\\" + uuid+"_"+getUploadFileFileName());
            FileInputStream fileInputStream = new FileInputStream(getUploadFile());
            byte[] buffer = new byte[1024];
            int len = 0;
            while ((len = fileInputStream.read(buffer)) > 0) {
                fileOutputStream.write(buffer, 0, len);
            }
            fileInputStream.close();
            log.info("上传文件接收成功,文件存放全路径为:" + rootPath + "/" + uuid+"_"+getUploadFileFileName());     

        } catch (Exception e){
            msg.setMsgName("SysDefectAction_doDefUploadAndInsert_fail");
            msg.setMsgText(getUploadFileFileName()+"上传失败,"+e.getMessage());
            out.write(JSON.toJSONString(msg));
            out.flush();
        } finally{
            out.close();
            return null;
        }

    }
时间: 2024-08-26 20:34:11

struts2+jquery+ajax实现上传&&校验实例的相关文章

Struts2 + uploadify 多文件上传完整实例!

首先我这里使用的是  Jquery  Uploadify3.2的版本  导入相关的CSS  JS    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/uploadify/uploadify.css"> <script src="<%=basePath%>js/jquery.min.js"></sc

jQuery.uploadify文件上传组件实例讲解

1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

兼容ie的jquery ajax文件上传

Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对于Ajax文件上传,大体是有: 1.创建一个input type="file" 的文件上传按钮,根据其id监听绑定其change事件,在事件中用jquery创建一个iframe,嵌入添加隐藏form,同时创建input type="file",id相同的文件上传按钮,并

jquery ajax实现上传文件代码,带进度条

原文:jquery ajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htm ajax上传文件代码,带进度条的. 首页 http://localhost:端口/项目名/common/test.htm 上传中 标签: jquery ajax 上传 进度条话题: Web开发 前端技术 jquery ajax实现上传文件代码,带进度条

关于ajax分段上传文件实例~

本来打算写的勤快一点的,谁知道最近好忙啊,忙着应聘的事情,这里突然想提一下自己的历程 自己现在是一只大三狗,高中三年是玩过去了,上了一所省内普通的不能再普通的二本.不过在大学里还算的上勤奋,大一上在学生会搅搅水,大一下就开始在学校网络中心里面干活,网络维护是工作,编程是兴趣,基本上每天网络中心寝室两点一线,所以说还算得上勤奋.不过现在我自己算是明白,很多事情不是勤奋就好了的,方法不对,真的是事倍功半.自己之前学习东西都是瞎倒腾,看书,看视频,记笔记,写demo.看起来稀疏平常,但是自己缺点在于太

Struts2 使用Jquery+ajax 文件上传

话不多说 直接上代码 前台js: 1 var formData = new FormData(); 2 formData.append("file1",$("#file1")[0].files[0]);//第一个file1代表后台文件属性名,第二个file1表示html中input的id 3 $.ajax({ 4 type:"post", 5 url:"ajax/uploadFile", 6 data:formData, 7

ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析

该示例中实际上应用了 jquery ajax(web client) + async web api 双异步. jquery ajax post 1 $.ajax({ 2 type: "POST", 3 url: "/api/FileUpload", 4 contentType: false, 5 processData: false, 6 data: data, 7 success: function (results) { 8 ShowUploadControl

struts2 jquery ajaxFileUpload 异步上传文件

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起.但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面.在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因.我的修改: 原文件: var oldElement = $('#' +

使用jquery Ajax实现上传附件功能

用过jquery的Ajax的人肯定都知道,Ajax的默认编码方式是"application/x-www-form-urlencoded",此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输数据的方式能够满足大部分应用场景,然而当传输的数据里有附件的时候,此序列化机制便是我们的绊脚石.Ajax本身的序列化机制的硬伤归其原因在于在html4的时代,没有FileReader接口,在页面里无法读取File(Blob)文件