Grails多附件上传----GSP篇

本文介绍了一个使用GSP页面实现的文件上传功能,包括form表单声明、File控件使用及JavaScript控制逻辑。通过动态添加文件输入框并实时更新已选文件列表,支持文件取消上传操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

GSP页面:

 

1、form声明

<g:form action="save" method="post"  enctype="multipart/form-data">

 

2、使用的File控件 

  <g:hiddenField name="dFileNum"  id="dFileNum" value="${params.dFileNum}" />---记录文件数量
        <div id=mFile><input type="file" name="dFileurl1" size="23" class="inputFileCSS"  id="dFileurl1" onchange="mCreateFile(this)"></div>
        <div id=mFileName></div>   ---------显示文件信息
        <div id="mstatus" style="color:red"></div>-------显示取消删除提示信息

 

 

 

3、JS

 

//JS控制取消文件的上传

  function cancelUpload(fileinputName){

                   var mName;
                   document.getElementById("mFileName").innerHTML="";
                     var n=0; //实际使用的控件数量
                     var divFile=document.getElementById("mFile");
                      for (var i=0;i<divFile.children.length;i++)
                      {
                        if (divFile.children[i].id==fileinputName) {

                                  divFile.removeChild(divFile.children[i]);
                                  i=i-1;

                        }
                        else if(divFile.children[i].id!="File_New")

                        {
                           n++;
                          divFile.children[i].id="dFileurl"+n;
                          divFile.children[i].name="dFileurl"+n;
                          mName=divFile.children[i].value.split("//")
                         document.getElementById("mFileName").innerHTML+="<div class='NameDetail' title='"+mName[mName.length-1]+"'>"+n+".  "+mName[mName.length-1]+"&nbsp;&nbsp;&nbsp;<a href=javascript:cancelUpload('dFileurl"+n+"')>取消</a></div>"
                        }
                      }
                      document.getElementById("mstatus").innerHTML="总共有 <b>"+n+"</b> 个文件等待上传"
                      document.getElementById("dFileNum").value=n;
               }

 

 

//增加新的上传控件

              function mCreateFile(obj){

                    var mName
                    var divFile=document.getElementById("mFile");

                   //判断上传文件是否重复
                      for (var i=0;i<divFile.children.length;i++)
                      {
                         if (divFile.children[i].id!=obj.id)
                         {
                               if (divFile.children[i].value==obj.value)
                               {
                                 alert("上传文件重复");
                                 divFile.removeChild(obj);
                                 break;
                               }
                         }
                      }

                     document.getElementById("mFileName").innerHTML="";
                     var n=0; //实际使用的控件数量

                      for (var i=0;i<divFile.children.length;i++)
                      {
                        if (divFile.children[i].value=="") {    //判断文件路径是否为空
                                if(divFile.children[i].id!="File_New")
                                {
                                  divFile.removeChild(divFile.children[i]);
                                  i=i-1;
                                }
                        }
                        else
                        {
                           n++;
                           divFile.children[i].id="dFileurl"+n;
                           divFile.children[i].name="dFileurl"+n;
                           mName=divFile.children[i].value.split("//")
                          document.getElementById("mFileName").innerHTML+="<div class='NameDetail' title='"+mName[mName.length-1]+"'>"+n+".  "+mName[mName.length-1]+"&nbsp;&nbsp;&nbsp;<a href=javascript:cancelUpload('dFileurl"+n+"')>取消</a></div>"
                        }
                      }
                      document.getElementById("mstatus").innerHTML="总共有 <b>"+n+"</b> 个文件等待上传"
                      document.getElementById("dFileNum").value=n;

                      //添加新上传的控件
                        if(divFile.children.length==n)
                        {
                                var isIE = (document.all) ? true : false;
                                 if (isIE)
                                    {
                                      //IE浏览器添加控件
                                      var eF=document.createElement('<input type="file" name="File" class="inputFileCSS" size="23" id="File_New" onchange="mCreateFile(this)">');
                                      divFile.appendChild(eF);
                                    }
                                    else{
                                      //FF浏览器添加控件
                                       var oElement = document.createElement("input");
                                           oElement.type = "file";
                                           oElement.id = "File_New";
                                           oElement.name = "File";
                                           oElement.size = "23";
                                           oElement.style.cssText="width:400px;font-size:12px;";
                                           oElement.addEventListener('change', mCreateFile,false);
                                           document.getElementById("mFile").insertBefore(oElement,null);
                                    }

                        }

               }

 

 

4、CSS

 

   <style>
 .inputFileCSS{
 font-size:12px;

}
#mTD{
  LINE-HEIGHT: 26px;
}
#mFile{
width:220px;
float:left;

|
#mFileName{
float:right;
width:182px;
}
.NameDetail{
overflow:hidden;
width:176px;
color:#000000;
font-family:Verdana,Arial,宋体;
font-size:12px;
cursor:default;
height:22px;
}

}

</style>

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值