请问如何实现多附件上传

taoxingqin 2008-11-30 02:13:32

请问如何实现多附上传

就是点击浏览按钮,选择上传的附件以后,下面又会自动弹出一个上传附件的框,最多同时可以上传五次,请问这个如何实现谢谢了,请大家帮个忙

...全文

110 点赞收藏 19

写回复

19 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

taoxingqin 2008-12-01

有人帮忙吗?

回复赞

taoxingqin 2008-12-01

十分感谢各位的帮忙,按照上面的方法做了,可以在IE中都能正常运行,在火狐跟GOOGLE浏览器中测试却没有反应,是无效的.
真是郁闷死了.麻烦各位帮忙看下.谢谢了

回复赞

mashimaro_ra 2008-12-01

function $(id)

{

    return document.getElementById(id);

}



var count=1;

function addUploadButton(){   

    var uploadForm=document.getElementById("uploadForm");  

    var pNode=document.createElement("p");

    if(count<5)

    {

        pNode.innerHTML="<input type='file' runat='server' onchange='addUploadButton()' name='myfile"+count+"' id='myfile"+count+"'/>";

        uploadForm.appendChild(pNode);

    }   

    count=count+1;

}

    <form id="form1" runat="server">

            <div id="uploadForm">

                <input id='myfile' runat='server' onchange='addUploadButton()' type='file' />

            </div>

    </form>

回复赞

lingyun410 2008-12-01

楼上的东东挺不错.

回复赞

cnchart 2008-12-01

前台界面部分基本上是这样。后台可参考一些上传组件的说明文档。

<style type="text/css">

<!--

body,ul,li{margin:0px;padding:0px;}

a{text-decoration: none;}

li {list-style-type: none;font-size:12px;font-family: Verdana, Arial, Helvetica, sans-serif;}

#display_name{width:680px;}

#display_name li{margin-right:20px;float:left;}

#display_name li span{float:left;margin-right:2px;position: relative;}

#display_name li .left{padding-left:14px;background-image: url(http://p.mail.163.com/dm3style/lib/0810310958/126green/ico.gif);background-position: -437px -40px;width:12px;}

#display_name li .middle{}

#display_name li .right{}

#display_name li .right a{width:14px;height:14px;border:none;overflow:hidden;}

#display_name li .right img{margin-left:-180px;margin-top:-100px;}

#attach_form{display:none;}

-->

</style>

<script language="javascript"> 

function addAttach(){

//增加文件

	var parent=document.getElementById("attach_form");

	var o_li=document.createElement("li");

	parent.appendChild(o_li);

	var o_li_fileform=document.createElement("input");

	o_li_fileform.type="file"

	o_li_fileform.name="upfile";

	o_li_fileform.style.display="none";

	o_li.appendChild(o_li_fileform)

	o_li_fileform.click();

	if(getfilename(o_li_fileform)==""){

		parent.removeChild(o_li);

	}else{

		var count=0;    //重复选择统计

		for(var j=0;j<parent.childNodes.length;j++){

			if(parent.childNodes[j].childNodes[0].value==o_li_fileform.value){

				count++;

			}

		}

		if(count>1){

			parent.removeChild(o_li);

			alert("已经选择了该文件");

		}else{

			var text_o_li=document.createElement("li");

			document.getElementById("display_name").appendChild(text_o_li);

			text_o_li.innerHTML="<span class=\"left\"></span><span class=\"middle\">"+getfilename(o_li_fileform)+"</span><span class=\"right\"><a href=\"javascript:void(0);\" onclick=\"remove_attach(this.parentNode.parentNode);\" title=\"删除\"><img src=\"http://p.mail.163.com/dm3style/lib/0810310958/126green/f3.gif\" /></a></span>";

		}

	}

}

function getfilename(target){

//取得选择的文件名

	var ar_filename=target.value.split(/\\/)

	return ar_filename[ar_filename.length-1];

}

function remove_attach(target){

//删除上传的文件

	for(var i=0;i<target.parentNode.childNodes.length;i++){

		if(target.parentNode.childNodes[i]==target){

			target.parentNode.removeChild(target);

			break;

		};

	}

	attach_form.removeChild(attach_form.childNodes[i]);

}

</script>

<body>

<FORM METHOD="POST" ACTION="" ENCTYPE="multipart/form-data"> 

<input type="button" name="addattach" value="添 加 附 件" onClick="addAttach()"/> 

<ul id="display_name">

</ul>

<ul id="attach_form">

</ul>

</form>

</body>