本人想做一个像126哪样的附件上传,支持多个,可增减附件数目!
本人想有JS动态生成!
<body>
<form enctype ="multipart/form-data" method="post" id="form1" runat="server">
<input type ="button" value="附件" onclick ="newUpload()" style="width: 48px" /> <a href="javascript:newUpload();">添加附件</a>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
<TBODY id="fileList" >
<tr ><td id="filetr" ></td></tr>
<tr><td> <div id="uploadFiles" style="display:block;">
</div>
</td></tr>
<input id="File1" type="file" />
</TBODY>
</TABLE>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>js代码
// JScript 文件
// 声明一个数组保存路径
var aryPath = new Array();
var xmlhttp;
//---新建上传
function newUpload()
{
var oFileList = document.getElementById("filetr");
var fileCount = oFileList.childNodes.length + 1;
var oFileInput = newFileInput("upfile_" + fileCount);
if(selectFile(oFileInput))
{
for(var i = 0;i< aryPath.length ;i++)
if(aryPath[i] == oFileInput.value)
{
alert("附件已存在!");
return ;
}
aryPath.push(oFileInput.value);
addFile(oFileInput);
}
}
//----选择文件
function selectFile(oFileInput)
{
var oUploadFiles = document.getElementById("uploadFiles");
oUploadFiles.appendChild(oFileInput);
oFileInput.focus();
oFileInput.click();//不能这样做,可能是为了安全着想吧!
var fileValue = oFileInput.value;
if(fileValue == "")
{
oUploadFiles.removeChild(oFileInput);
return false;
}
else
return true;
}
//---新建一个文件显示列表
function addFile(oFileInput)
{
// var oFileList = document.getElementById("fileList");
//var fileIndex = oFileList.childNodes.length + 1;
// var oTR = document.createElement("TR");
var oTR = document.getElementById("filetr");
var fileIndex = oTR.childNodes.length + 1;
// var oTD1 = document.createElement("TD");
var oTD2 = document.createElement("span");
// oTR.setAttribute("id","file_" + fileIndex);
//oTR.setAttribute("bgcolor","#FFFFFF");
// oTD1.setAttribute("id","file_" + fileIndex);
// oTD1.setAttribute("bgcolor","#FFFFFF");
oTD2.setAttribute("id","file_" + fileIndex);
oTD2.setAttribute("bgcolor","#FFFFFF");
// oTD1.setAttribute("width","6%");
// oTD2.setAttribute("width","42%");
oTD2.setAttribute("align","left");
oTD2.innerHTML =' <img src="image/add.gif" width="12px" height ="12px" />'+ Substring(oFileInput.value) +'<img src="image/delet.gif" width="10px" height ="10px" onclick ="removeFile('+ fileIndex + ');"/> ';
// oTD2.innerText = Substring(oFileInput.value);
//oTR.appendChild(oTD1);
oTR.appendChild(oTD2);
//oFileList.appendChild(oTR);
}
//---移除上传的文件
function removeFile(fileIndex)
{
var oFileInput = document.getElementById("upfile_" + fileIndex);
//var oTR = document.getElementById("file_" + fileIndex);
uploadFiles.removeChild(oFileInput);
//fileList.removeChild(oTR);
var oTR = document.getElementById("filetr");
var oDT = document.getElementById("file_" + fileIndex);
oTR.removeChild(oDT);
aryPath.pop(aryPath[fileIndex]);
//aryPath.length--;
}
//---创建一个file input对象并返回
function newFileInput(_name)
{
var oFileInput = document.createElement("INPUT");
oFileInput.type = "file";
oFileInput.id = _name;
oFileInput.name = _name;
oFileInput.size="50";
oFileInput.setAttribute("runat ","server")
oFileInput.setAttribute("id",_name);
oFileInput.setAttribute("name",_name);
oFileInput.outerHTML = '<INPUT type=file runat="server" id=' + _name + ' name=' + _name + '>';
//alert(oFileInput.outerHTML);
return oFileInput;
}提交是为什么有多少个INPUP FILE 就要提交多少次才能转到后置代码!而且每次都清空了 input file中的文件名,这样提交了
HttpFileCollection files = Request.Files;
files 也没有想要的文件!
这是为什么啊,页面没有刷新,在提交时!
本人想有JS动态生成!
<body>
<form enctype ="multipart/form-data" method="post" id="form1" runat="server">
<input type ="button" value="附件" onclick ="newUpload()" style="width: 48px" /> <a href="javascript:newUpload();">添加附件</a>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
<TBODY id="fileList" >
<tr ><td id="filetr" ></td></tr>
<tr><td> <div id="uploadFiles" style="display:block;">
</div>
</td></tr>
<input id="File1" type="file" />
</TBODY>
</TABLE>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>js代码
// JScript 文件
// 声明一个数组保存路径
var aryPath = new Array();
var xmlhttp;
//---新建上传
function newUpload()
{
var oFileList = document.getElementById("filetr");
var fileCount = oFileList.childNodes.length + 1;
var oFileInput = newFileInput("upfile_" + fileCount);
if(selectFile(oFileInput))
{
for(var i = 0;i< aryPath.length ;i++)
if(aryPath[i] == oFileInput.value)
{
alert("附件已存在!");
return ;
}
aryPath.push(oFileInput.value);
addFile(oFileInput);
}
}
//----选择文件
function selectFile(oFileInput)
{
var oUploadFiles = document.getElementById("uploadFiles");
oUploadFiles.appendChild(oFileInput);
oFileInput.focus();
oFileInput.click();//不能这样做,可能是为了安全着想吧!
var fileValue = oFileInput.value;
if(fileValue == "")
{
oUploadFiles.removeChild(oFileInput);
return false;
}
else
return true;
}
//---新建一个文件显示列表
function addFile(oFileInput)
{
// var oFileList = document.getElementById("fileList");
//var fileIndex = oFileList.childNodes.length + 1;
// var oTR = document.createElement("TR");
var oTR = document.getElementById("filetr");
var fileIndex = oTR.childNodes.length + 1;
// var oTD1 = document.createElement("TD");
var oTD2 = document.createElement("span");
// oTR.setAttribute("id","file_" + fileIndex);
//oTR.setAttribute("bgcolor","#FFFFFF");
// oTD1.setAttribute("id","file_" + fileIndex);
// oTD1.setAttribute("bgcolor","#FFFFFF");
oTD2.setAttribute("id","file_" + fileIndex);
oTD2.setAttribute("bgcolor","#FFFFFF");
// oTD1.setAttribute("width","6%");
// oTD2.setAttribute("width","42%");
oTD2.setAttribute("align","left");
oTD2.innerHTML =' <img src="image/add.gif" width="12px" height ="12px" />'+ Substring(oFileInput.value) +'<img src="image/delet.gif" width="10px" height ="10px" onclick ="removeFile('+ fileIndex + ');"/> ';
// oTD2.innerText = Substring(oFileInput.value);
//oTR.appendChild(oTD1);
oTR.appendChild(oTD2);
//oFileList.appendChild(oTR);
}
//---移除上传的文件
function removeFile(fileIndex)
{
var oFileInput = document.getElementById("upfile_" + fileIndex);
//var oTR = document.getElementById("file_" + fileIndex);
uploadFiles.removeChild(oFileInput);
//fileList.removeChild(oTR);
var oTR = document.getElementById("filetr");
var oDT = document.getElementById("file_" + fileIndex);
oTR.removeChild(oDT);
aryPath.pop(aryPath[fileIndex]);
//aryPath.length--;
}
//---创建一个file input对象并返回
function newFileInput(_name)
{
var oFileInput = document.createElement("INPUT");
oFileInput.type = "file";
oFileInput.id = _name;
oFileInput.name = _name;
oFileInput.size="50";
oFileInput.setAttribute("runat ","server")
oFileInput.setAttribute("id",_name);
oFileInput.setAttribute("name",_name);
oFileInput.outerHTML = '<INPUT type=file runat="server" id=' + _name + ' name=' + _name + '>';
//alert(oFileInput.outerHTML);
return oFileInput;
}提交是为什么有多少个INPUP FILE 就要提交多少次才能转到后置代码!而且每次都清空了 input file中的文件名,这样提交了
HttpFileCollection files = Request.Files;
files 也没有想要的文件!
这是为什么啊,页面没有刷新,在提交时!
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货