Grails多附件上传----GSP篇_js 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]+"   <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]+"   <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

}
#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>