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