<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
</head>
<script language="javascript">
function chick(){
var _count = document.getElementById("files").getElementsByTagName("input");
var len = _count.length - 1;
var _obj = _count[len];
var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
if (ie) {
_obj.click();
}
else {
var a = document.createEvent("MouseEvents");
a.initEvent("click", true, true);
_obj.dispatchEvent(a);
}
var _path = _obj.value;
var _parent = document.getElementById("path_table").firstChild;
var row = document.createElement("tr");
row.setAttribute("id",len);
var cell1 = document.createElement("td");
cell1.style.borderBottom = "solid";
cell1.style.borderBottomWidth = "1px";
var cell2 = document.createElement("td");
cell2.style.borderBottom = "solid";
cell2.style.borderBottomWidth = "1px";
var _a = document.createElement("a");
_a.innerHTML = "取消";
_a.href = "javascript:remove("+len+")";
var _text = document.createTextNode(_path);
cell1.appendChild(_text);
cell2.appendChild(_a);
row.appendChild(cell1);
row.appendChild(cell2);
_parent.appendChild(row);
}
function create(){
//统计现有input
var length = document.getElementById("files").getElementsByTagName("input").length;
var _id = "";
if (length == 0) {
_id = "0"
} else {
_id = length;
}
//添加一个新的INPUT
var _td = document.getElementById("input_td");
var _input = document.createElement("input");
_input.setAttribute("type", "file");
_input.setAttribute("name", "pics[]");
alert(_input.getAttribute('name'));
_input.setAttribute("id", _id);
_td.appendChild(_input);
chick();
}
function remove(obj) {
var _rem = document.getElementById(obj);
var _remt = document.getElementById("path_table").firstChild;
_remt.removeChild(_rem);
var _inputs = document.getElementById("files").getElementsByTagName("input");
for (var i = 0; i < _inputs.length; i++) {
var tmp = _inputs[i];
if (tmp.getAttribute("id") == obj) {
document.getElementById("input_td").removeChild(tmp);
break;
}
}
}
</script>
<body>
<form name="fileupload" method="post" action="uploadservlet.php" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
文件上传
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"
width="100%" id="path_table" style="border-bottom:solid; border-bottom-width:1px;">
<tr id="first_tr">
<td width="80%" style="border-bottom:solid; border-bottom-width:1px;">
文件路径
</td>
<td width="20%" style="border-bottom:solid; border-bottom-width:1px;">
操作
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input name="button" type="button" onclick="create();" value="选择文件" />
<input type="submit" value="提交" />
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" id="files" style="display:none;">
<tr>
<td id="input_td">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
这里的老手,都在捞分,一分钟甚至希望半分钟处理一个帖。怎么可能专为你一个人服务那样有耐心来看你不说明具体问题的大篇代码。看看论坛公告的这个帖子,“提问的智慧”,初来者都该先看看的
http://community.csdn.net/IndexPage/SmartQuestion.aspx
动态生成的部分
function create(){
……
//添加一个新的INPUT
……
_input.setAttribute("name", "pics[]");//这是各项文件共同的name
_input.setAttribute("id", "file"+_id);//这是每个文件单独的ID
_td.appendChild(_input);
chick();
}提交就提交到uploadservlet.php里处理了,有name有id。
至于你说提交可能有点问题,原因是因为要给动态增加的按钮增加点击事件,所以在增加了文件项后去执行chick()函数了,而在里面
if (ie) {
_obj.click();
}
else {
var a = document.createEvent("MouseEvents");
a.initEvent("click", true, true);
_obj.dispatchEvent(a);
}
这样的结果,就是需要点两次提交,才会执行提交。加个说明就行了,改起来有点麻烦,也没心情。
function maker(tag) {
return function(attributes, children) {
if (arguments.length == 1) return make(tag, attributes);
else return make(tag, attributes, children);
}
}
function make(tag, attributes, children) {
var root = document.createElement(tag);
if(arguments.length == 2 && attributes.constructor != Object) {
children = attributes;
attributes = null;
}
if(attributes) {
for(var name in attributes) {
if(attributes[name] == attributes.className) root.className = attributes[name];
else root.setAttribute(name, attributes[name]);
}
}
if(children) {
if(children.constructor == String) {
root.appendChild(document.createTextNode(children));
} else if(children.constructor == Array) {
for(var i = 0; i < children.length; i++) {
if(children[i].constructor == String) children[i] = document.createTextNode(children[i]);
root.appendChild(children[i]);
}
} else {
root.appendChild(children);
}
}
return root;
}
var table = maker("table"), tbody = maker("tbody"), tr = maker("tr"), td = maker("td");
var myTable = table({width : 400, align : "center", cellPadding : 0, cellSpacing : 1, border : 0, bgColor : "#000000"},
tbody([tr({height : 25, align : "center", vAlign : "middle", bgColor : "#FFFF00"}, td({colSpan : 5}, "课程表")),
tr({height : 25, align : "center", vAlign : "middle", bgColor : "#FFFF00"}, [td("星期一"), td("星期二"), td("星期三"), td("星期四"), td("星期五")]),
tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
tr({height : 5, bgColor : "#FFFF00"}, td({colSpan : 5})),
tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")])]));
document.body.appendChild(myTable);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
</head>
<script language="javascript">
var lenId=0;//file length
function chick(){
//var _count = document.getElementById("files").getElementsByTagName("input");
var len = lenId++;//_count.length - 1;
var _obj = document.getElementById("files").getElementsByTagName("input")[0];//_count[len];
var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
if (ie) {
_obj.click();
}
else {
var a = document.createEvent("MouseEvents");
a.initEvent("click", true, true);
_obj.dispatchEvent(a);
}
var _path = _obj.value;
var _parent = document.getElementById("path_table").firstChild;
var row = document.createElement("tr");
row.setAttribute("id",len);
var cell1 = document.createElement("td");
cell1.style.borderBottom = "solid";
cell1.style.borderBottomWidth = "1px";
var cell2 = document.createElement("td");
cell2.style.borderBottom = "solid";
cell2.style.borderBottomWidth = "1px";
var _a = document.createElement("a");
_a.innerHTML = "取消";
_a.href = "javascript:remove("+len+")";
var _text = document.createTextNode(_path);
cell1.appendChild(_text);
cell2.appendChild(_a);
row.appendChild(cell1);
row.appendChild(cell2);
_parent.appendChild(row);
//set post data
document.getElementById("postData").value += _path + ";"
_obj.parentNode.removeChild(_obj);
}
function create(){
//统计现有input
var length = document.getElementById("files").getElementsByTagName("input").length;
var _id = "";
if (length == 0) {
_id = "0"
} else {
_id = length;
}
//添加一个新的INPUT
var _td = document.getElementById("input_td");
var _input = document.createElement("input");
_input.setAttribute("type", "file");
_input.setAttribute("name", "pics[]");
//alert(_input.getAttribute('name'));
_input.setAttribute("id", _id);
_td.appendChild(_input);
chick();
}
function remove(obj) {
var _rem = document.getElementById(obj);
var _remt = document.getElementById("path_table").firstChild;
var Data = document.getElementById("postData").value.split(";");
Data.splice(_rem.rowIndex-1,1);
document.getElementById("postData").value = Data.join(";")
alert(document.getElementById("postData").value);
_remt.removeChild(_rem);
/*
var _inputs = document.getElementById("files").getElementsByTagName("input");
for (var i = 0; i < _inputs.length; i++) {
var tmp = _inputs[i];
if (tmp.getAttribute("id") == obj) {
document.getElementById("input_td").removeChild(tmp);
break;
}
}
*/
}
</script>
<body>
<form name="fileupload" method="post" action="photo3.aspx" enctype="multipart/form-data">
<input type="hidden" id="postData"/>
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
文件上传
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"
width="100%" id="path_table" style="border-bottom:solid; border-bottom-width:1px;">
<tr id="first_tr">
<td width="80%" style="border-bottom:solid; border-bottom-width:1px;">
文件路径
</td>
<td width="20%" style="border-bottom:solid; border-bottom-width:1px;">
操作
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input name="button" type="button" onclick="create();" value="选择文件" />
<input type="submit" value="提交"/>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" id="files" style="display:block;">
<tr>
<td id="input_td">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
而且在弹出一个input之前要判断是否已经选了上传文件,
没选就不要添加啊
用PHP
$array=explode(';',$postData);
可以取到数组中,但是用PHP的预处理$_FILES对字符串不能操作,请问一下怎么解决。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
</head>
<script language="javascript">
function chick(){
var _count = document.getElementById("files").getElementsByTagName("input");
var len = _count.length - 1;
var _obj = _count[len];
var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
if (ie) {
_obj.click();
}
else {
var a = document.createEvent("MouseEvents");
a.initEvent("click", true, true);
_obj.dispatchEvent(a);
}
var _path = _obj.value;
alert("得到路径:" + _path);
var _parent = document.getElementById("path_table").firstChild;
var row = document.createElement("tr");
row.setAttribute("id",len);
var cell1 = document.createElement("td");
cell1.style.borderBottom = "solid";
cell1.style.borderBottomWidth = "1px";
var cell2 = document.createElement("td");
cell2.style.borderBottom = "solid";
cell2.style.borderBottomWidth = "1px";
var _a = document.createElement("a");
_a.innerHTML = "取消";
_a.href = "javascript:remove("+len+")";
var _text = document.createTextNode(_path);
cell1.appendChild(_text);
cell2.appendChild(_a);
row.appendChild(cell1);
row.appendChild(cell2);
_parent.appendChild(row);
}
function create(){
//统计现有input
var length = document.getElementById("files").getElementsByTagName("input").length;
var _id = "";
if (length == 0) {
_id = "0"
} else {
_id = length;
}
//添加一个新的INPUT
var _td = document.getElementById("input_td");
var _input = document.createElement("input");
_input.setAttribute("type", "file");
_input.setAttribute("name", "pics[]");
//alert(_input.getAttribute('name'));
_input.setAttribute("id", _id);
_td.appendChild(_input);
chick();
}
function remove(obj) {
var _rem = document.getElementById(obj);
var _remt = document.getElementById("path_table").firstChild;
_remt.removeChild(_rem);
var _inputs = document.getElementById("files").getElementsByTagName("input");
for (var i = 0; i < _inputs.length; i++) {
var tmp = _inputs[i];
aler
if (tmp.getAttribute("id") == obj) {
document.getElementById("input_td").removeChild(tmp);
break;
}
}
}
function submitForm() {
alert("提交 form表单");
var _inputs = document.getElementById("files").getElementsByTagName("input");
for (var i = 0; i < _inputs.length; i++) {
var tmp = _inputs[i];
alert("已选择文件:" + tmp.value);
}
document.fileupload.submit();
}
</script>
<body bgcolor="white">
<form name="fileupload" method="post" action="#" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
文件上传
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"
width="100%" id="path_table" style="border-bottom:solid; border-bottom-width:1px;">
<tr id="first_tr">
<td width="80%" style="border-bottom:solid; border-bottom-width:1px;">
文件路径
</td>
<td width="20%" style="border-bottom:solid; border-bottom-width:1px;">
操作
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input name="button" type="button" onclick="create();" value="选择文件" />
<input type="submit" value="提交" onclick="submitForm()"/>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" id="files" style="display:none;">
<tr>
<td id="input_td">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>