喜悦国际村 - XML/HTML/CSS/Js - 有没有JS实现多个文件上传的代码?(页 1)

喜悦国际村 » XML/HTML/CSS/Js » 有没有JS实现多个文件上传的代码?

页: [1]

tongj

2008-5-5 05:07 AM

有没有JS实现多个文件上传的代码?

我想实现像QQ邮箱里面,发邮件时添加附件时的那种多个文件上传的效果

我试着分离出来了它的代码,可惜只能在单页面里面用,在IFRAME里面就不行了

不知道哪位大哥大姐有现成的代码?

sanders_yao

2008-5-5 07:46 AM

如果不刷新上传一般也都是使用iframe的吧

tongj

2008-5-5 07:58 AM

用JAVASCRIPT添加INPUT就行了的
我又自己写了一个程序,添加INPUT可以实现.但删除的时候不能完全对应

[php]<HTML>
<HEAD>
<script>
var file_to=0;
function add_inp(){
newInp = document.createElement("input");
newInp.setAttribute("id","file_"+file_to);
      newInp.setAttribute("type","file");
      newInp.setAttribute("name","upfile[]");
      div1.appendChild(newInp);
newInp = document.createElement("<input onclick=del_inp("+file_to+")>");
newInp.setAttribute("id","file_del_"+file_to);
      newInp.setAttribute("type","button");
      newInp.setAttribute("value","删除");
      div1.appendChild(newInp);
newInp.setAttribute("id","file_br_"+file_to);
      newInp = document.createElement("br");
      div1.appendChild(newInp);
file_to++;
}
function del_inp(file_id){
file_id+=2;
file_to-=3;
div1.removeChild(div1.childNodes[file_id]);
file_id--;
div1.removeChild(div1.childNodes[file_id]);
file_id--;
div1.removeChild(div1.childNodes[file_id]);
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></HEAD>
<BODY>
<FORM METHOD="post" ENCTYPE="multipart/form-data" name=f1>
<div id=div1>
</div>
<INPUT TYPE="button" VALUE="增加上传" onclick=add_inp()>
<INPUT TYPE="button" VALUE="减少上传" onclick=del_inp()><br>
<INPUT TYPE="submit" VALUE="提交" NAME="Submit">
</FORM>
</BODY> [/php]

tongj

2008-5-7 01:15 AM

研究了几天,总算搞出来了,给大家测试下

[code]<?php
print_r($_FILES);
?>
<HTML>
<HEAD>
<script>
var file_to=0;
function add_inp(){
newInp = document.createElement("input");
newInp.setAttribute("id","file_"+file_to);
      newInp.setAttribute("type","file");
      newInp.setAttribute("name","upfile[]");
      div1.appendChild(newInp);
newInp = document.createElement('<input type="button" value="删除" onclick="del_inp('+file_to+')">');
newInp.setAttribute("id","file_del_"+file_to);
      div1.appendChild(newInp);
      newInp = document.createElement('<BR />');
newInp.setAttribute("id","file_br_"+file_to);
      div1.appendChild(newInp);
file_to++;
}
function del_inp(file_id){
div1.removeChild(document.getElementById("file_"+file_id));
div1.removeChild(document.getElementById("file_del_"+file_id));
div1.removeChild(document.getElementById("file_br_"+file_id));
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></HEAD>
<BODY>
<FORM METHOD="post" ENCTYPE="multipart/form-data" name=f1>
<div id=div1>
</div>
<INPUT TYPE="button" VALUE="增加上传" onclick=add_inp()>
<INPUT TYPE="button" VALUE="减少上传" onclick=del_inp()><br>
<INPUT TYPE="submit" VALUE="提交" NAME="Submit">
</FORM>
</BODY> [/code]

查看完整版本: 有没有JS实现多个文件上传的代码?