• ajaxFileUpload使用Struts2实现多文件上传


    jsp:

    <form id="importClearNoticeForm"  enctype="multipart/form-data">
            <table class="qtable" width="100%"  cellspacing="1" cellpadding="1" >
                <tr >
                    <td class="flabel">请选择要上传的<i style="color: red">文件1</i></td>
                    <td class="finput"><input id="checkFiles1" type="file" name="checkFiles"/> </td>
                </tr>
                <tr>
                    <td class="flabel">请选择要上传的<i style="color: red">文件2</i></td>
                    <td class="finput"><input id="checkFiles2" type="file" name="checkFiles"/> </td>
                </tr>
            </table>
        </form>

    js:

    $.ajaxFileUpload({
       url:'reportCheck.action',
       secureuri:false,
      //上传文件框的id属性 fileElementId:['checkFiles1','checkFiles2'], dataType: 'json', success:function (data, status){   $('#importClearNotice').dialog('close'); if(data.success){ $('#importClearNotice').dialog('close'); //将结果回显到表格 $("#resultTableDiv").html(""); $("#resultTableDiv").append(resultTable(data)); alert("核对完成!"); }else { alert(data.syserr); } } });

    ajax默认只支持单文件上传,即js中标红的地方只能传fileElementId:'checkFiles1',此处重点说明多文件上传。

    因此需要修改ajaxfileupload.js文件,使其支持多文件上传。

    由于使用的版本不一样,ajaxfileupload.js中的变量是不一样的,但是原理都一样,只需照猫画虎就可以!!!

    下面标红的地方即为修改的地方,这样就可以支持单文件上传和多文件上传。

    ajaxfileupload.js:

    createUploadForm: function(g, b) {
            var e = "jUploadForm" + g;
            var a = "jUploadFile" + g;
            var d = $('<form  action="" method="POST" name="' + e + '" id="' + e + '" enctype="multipart/form-data"></form>');
         //判断类型,如果是字符串按单文件上传 if(typeof(b)=='string'){ var c = $("#" + b); var f = $(c).clone(); $(c).attr("id", a); $(c).before(f); $(c).appendTo(d); }
         //如果是数组则按多文件上传 if(Array.isArray(b)){ for(var i in b){ var c = $('#' + b[i]); var f = $(c).clone(); $(c).attr('id', a); $(c).before(f); $(c).appendTo(d); } } $(d).css("position", "absolute"); $(d).css("top", "-1200px"); $(d).css("left", "-1200px"); $(d).appendTo("body"); return d }

    接下来就是struts2文件上传的配置

    <action name="reportCheck" class="com.wlv1314.AjaxFileUploadAction" method="reportCheck">
                <interceptor-ref name="sessionTimeOutInp" />
                <interceptor-ref name="fileUploadStack" />
                <interceptor-ref name="exceptionInterceptor" />
    </action>
    AjaxFileUploadAction:
    以下为多文件上传,单文件的话只需将类型调整为不是数组就可以。
        //文件名命名规则为xxxFileName,xxx为接收文件的属性
        private File[] checkFiles;
    private String[] checkFilesFileName;public File[] getCheckFiles() { return checkFiles; } public void setCheckFiles(File[] checkFiles) { this.checkFiles = checkFiles; } public String[] getCheckFilesFileName() { return checkFilesFileName; } public void setCheckFilesFileName(String[] checkFilesFileName) { this.checkFilesFileName = checkFilesFileName; }

    //接收文件action
        public String reportCheck() throws Exception{
    File[] checkFiles = this.checkFiles;
    String[] checkFilesFileName = this.checkFilesFileName;
         //这样就能获取到上传的多个文件了
        }

    然后就可以愉快的操作上传的多个文件了!!!

  • 相关阅读:
    vue3 + ts+ axios +vite
    用查询批量导入EXCEL 时,获取EXCEL 表sheet名称
    DataTable中,标题Caption,ColumnName的区别
    查询语句,从2张表中,根据共同字段,如果其他两个指定字段值不相等,则,显示两个值
    springboot 工程出现 socket hang up
    springboot工程引用本地lib文件夾内的jar包,打包時把依賴jar包打入jar包
    kubernetes常用命令1命令补全
    kubernetes常用命令2巡检集群状态
    BigDecimal数字计算工具类
    Nginx+RTMP HLS降低延迟参数
  • 原文地址:https://www.cnblogs.com/wlv1314/p/15817712.html
Copyright © 2020-2023  润新知