js多附件上传方法与代码

发布时间:2019-07-21编辑:脚本学堂
本文介绍了javascript实现多附件上传的三种方法与实例代码,感兴趣的朋友参考下。

方法一,js实现多附件上传。
 

复制代码 代码示例:

<style type="text/css">
.file { font: 10pt; color: black; }
</style>
<script language="javascript">
function addFile() {
var fileDiv = document.all['fileDiv'];
var strHtml = '<span><input type="file">&nbsp;&nbsp;<button onclick="removeFile(parentNode);">删除</button><br></span>';
fileDiv.innerHTML += strHtml;
}

function removeFile(obj) {
obj.removeNode(true);
}
</script>
<form enctype="multipart/form-data">
<div id="fileDiv"></div>
<a href="javascript:void(addFile());" class="file">添加附件</a>
</form>

方法二,js实现多附件上传。
 

复制代码 代码示例:

<style type="text/css"> .file { font: 10pt; color: black; } </style>
<script language="javascript">
var i=0;
function addFile() {
i++;
currRow=conditionTable.insertRow();
cellc=currRow.insertCell();
cellcContext= '<input type="file" NAME="File+"+i>&nbsp;&nbsp;<button onclick="removeFile();">去除</button><br>';
cellc.innerHTML=cellcContext;
}
function findTD(o){
if (o.nodeName=="TR"||o.nodeName=="TABLE") return;
if(o.nodeName=="TD")
return (o);
else
return (o.parentElement);
}
function removeFile(){
o = findTD(event.srcElement);
alert(o.parentElement.rowIndex*1);
conditionTable.deleteRow(o.parentElement.rowIndex*1);
}
function uploadFile(){
}

</script>
<form enctype="multipart/form-data">
<a href="javascript:void(addFile());" class="file">添加附件</a> <a href="javascript:void(uploadFile());" class="file">上传附件</a>
<div id="fileDiv" style='height:150px;top:150px;left:0px;overflow-x:auto;overflow-y:auto ;border-style:outset;border-width:1pt;border-color: black;'>
<table id=conditionTable border=1 >
</table>
</div>
</form>

三、GMAIL式的js多附件上传功能代码。
 

复制代码 代码示例:

<div id="files">
<div>
<input type=button onclick="add();" value=Attacthment>

<script>
var html="<input name=title type=file> <input type=button value=Delete onclick="remove(this)">";
function add()
{
var o=document.all["files"];
var div=document.createElement("div");
div.innerHTML=html;
o.appendChild(div);
div.childNodes[0].click();
}
function remove(obj)
{
obj.parentElement.parentElement.removeChild(obj.parentElement);
}
</script>

您可能感兴趣的文章: