JavaScript文件上传
类似163网盘那样的上传文件组件。
需要一个隐藏的<td>来放置上传文件的全路径，里面有一个<input type="file">。由于<input type="file">中的value不能由javascript修改，只能由用户提供。所以提出以下方案：
在原来隐藏于[上传文件]按钮之后的<input type="file">中选中文件之后，移动这个对象到前面提到的<td>中，再重设name id class等属性，再clone一个，用insertBefore()方法将其移动(插入)到原位置，继续接受文件。
删除不需要上传文件的处理：
利用一个函数，参数为点击对象(this)，再用.parentNode.parentNode来删除这一行(这个节点)。
一下为实例代码
HTML
HTML
1
<html>
2<head>
3<script language="javascript">
4 function getBaseName(str) 
{
5
var ch = '/';
6 var s = str.lastIndexOf(ch);
7
if(s == -1) {
8 ch = '\\';
9 var s = str.lastIndexOf(ch);
10
}
11 if(s == -1) { return(null); }
12 else {
13 return(str.substring(s + 1, str.length));
14 }
15 return(' ');
16
}
17 function list_images(path) {
18 var flname = getBaseName(path);
19 var inp_pls = document.getElementById('upload_flbox');
20 var d_imgls = document.getElementById('d_imagetab');
21
22 var tr_imgls = document.createElement('TR');
23 var td_fnm = document.createElement('TD');
24 var td_inp = document.createElement('TD');
25 var td_cz = document.createElement('TD');
26 if(!document.getElementById('uplist_form')) {
27 var f_imguplist = document.createElement('FORM');
28 f_imguplist.id = 'uplist_form';
29 f_imguplist.method = 'POST';
30 d_imgls.appendChild(f_imguplist);
31 } else {
32 var f_imguplist = document.getElementById('uplist_form');
33 }
34 if(!document.getElementById('t_imgls')) {
35 var t_imgls = document.createElement('TABLE');
36 var tb_imgls = document.createElement('TBODY');
37 t_imgls.id = 't_imgls';
38 t_imgls.width = '100%';
39 tb_imgls.id = 'tb_imgls';
40 f_imguplist.appendChild(t_imgls);
41 t_imgls.appendChild(tb_imgls);
42 } else {
43 var t_imgls = document.getElementById('t_imgls');
44 var tb_imgls = document.getElementById('tb_imgls');
45 }
46 tb_imgls.appendChild(tr_imgls);
47 tr_imgls.appendChild(td_fnm);
48 tr_imgls.appendChild(td_inp);
49 tr_imgls.appendChild(td_cz);
50 td_fnm.innerHTML = flname;
51 td_cz.width = '30%';
52 td_cz.innerHTML = '<img src="b_drop.png" onclick="del_imagepath(this);">';
53 //移动原来的文件输入框
54 inp_pls.id = 'upload_pathlist';
55 inp_pls.className = 'upload_pathlist';
56 inp_pls.name = 'upload_pathlist';
57 td_inp.appendChild(inp_pls);
58 //重新生成一个暗藏的文件框
59 var yuan_flbox = inp_pls.cloneNode(true);
60 yuan_flbox.id = 'upload_flbox';
61 yuan_flbox.name = 'upload_flbox';
62 var btn_fl = document.getElementById('upload_btn');
63 btn_fl.parentNode.insertBefore(yuan_flbox, btn_fl);
64 }
65 function del_imagepath(obj) {
66 var tr_del = obj.parentNode.parentNode;
67 tr_del.parentNode.removeChild(tr_del);
68 }
69</script>
70<style>
71 #upload_flbox {
72 display: none;
73 }
74 .upload_pathlist {
75 display: none;
76 }
77 #upload_btn {
78 background: #afeeee;
79 border: 2px solid #d8dfd8;
80 color: #000000;
81 text-align: right;
82 font-size: 12px;
83 background: #afeeee url("add.gif") no-repeat;
84 height: 30px;
85 width: 90px;
86 text-indent: -1px;
87 }
88</style>
89</head>
90<body>
91<div>
92 <div id="test1" width="10">
93 <form method="POST">
94 <input type="file" id="upload_flbox" length="10" name="upload_flbox" onchange="list_images(this.value);">
95 <input type="button" id="upload_btn" name="button1" value="添加图片" onclick=javascript:document.getElementById("upload_flbox").click();>
96 </form>
97 </div>
98 <div id="d_imagetab">
99 </div>
100</div>
101</body>
102</html>
需要一个隐藏的<td>来放置上传文件的全路径，里面有一个<input type="file">。由于<input type="file">中的value不能由javascript修改，只能由用户提供。所以提出以下方案：
在原来隐藏于[上传文件]按钮之后的<input type="file">中选中文件之后，移动这个对象到前面提到的<td>中，再重设name id class等属性，再clone一个，用insertBefore()方法将其移动(插入)到原位置，继续接受文件。
删除不需要上传文件的处理：
利用一个函数，参数为点击对象(this)，再用.parentNode.parentNode来删除这一行(这个节点)。
一下为实例代码
HTML
HTML1
<html>2
<head>3
<script language="javascript">4
function getBaseName(str) {5
var ch = '/';6
var s = str.lastIndexOf(ch);7
if(s == -1) {8
ch = '\\';9
var s = str.lastIndexOf(ch);10
}11
if(s == -1) { return(null); }12
else {13
return(str.substring(s + 1, str.length));14
}15
return(' ');16
}17
function list_images(path) {18
var flname = getBaseName(path);19
var inp_pls = document.getElementById('upload_flbox'); 20
var d_imgls = document.getElementById('d_imagetab');21
22
var tr_imgls = document.createElement('TR');23
var td_fnm = document.createElement('TD');24
var td_inp = document.createElement('TD');25
var td_cz = document.createElement('TD');26
if(!document.getElementById('uplist_form')) {27
var f_imguplist = document.createElement('FORM');28
f_imguplist.id = 'uplist_form';29
f_imguplist.method = 'POST';30
d_imgls.appendChild(f_imguplist);31
} else {32
var f_imguplist = document.getElementById('uplist_form');33
}34
if(!document.getElementById('t_imgls')) {35
var t_imgls = document.createElement('TABLE');36
var tb_imgls = document.createElement('TBODY');37
t_imgls.id = 't_imgls';38
t_imgls.width = '100%';39
tb_imgls.id = 'tb_imgls';40
f_imguplist.appendChild(t_imgls);41
t_imgls.appendChild(tb_imgls);42
} else {43
var t_imgls = document.getElementById('t_imgls');44
var tb_imgls = document.getElementById('tb_imgls');45
}46
tb_imgls.appendChild(tr_imgls);47
tr_imgls.appendChild(td_fnm);48
tr_imgls.appendChild(td_inp);49
tr_imgls.appendChild(td_cz);50
td_fnm.innerHTML = flname;51
td_cz.width = '30%';52
td_cz.innerHTML = '<img src="b_drop.png" onclick="del_imagepath(this);">';53
//移动原来的文件输入框54
inp_pls.id = 'upload_pathlist';55
inp_pls.className = 'upload_pathlist';56
inp_pls.name = 'upload_pathlist';57
td_inp.appendChild(inp_pls);58
//重新生成一个暗藏的文件框59
var yuan_flbox = inp_pls.cloneNode(true);60
yuan_flbox.id = 'upload_flbox';61
yuan_flbox.name = 'upload_flbox';62
var btn_fl = document.getElementById('upload_btn');63
btn_fl.parentNode.insertBefore(yuan_flbox, btn_fl);64
}65
function del_imagepath(obj) {66
var tr_del = obj.parentNode.parentNode;67
tr_del.parentNode.removeChild(tr_del);68
}69
</script>70
<style>71
#upload_flbox {72
display: none;73
}74
.upload_pathlist {75
display: none;76
}77
#upload_btn {78
background: #afeeee;79
border: 2px solid #d8dfd8;80
color: #000000;81
text-align: right;82
font-size: 12px;83
background: #afeeee url("add.gif") no-repeat;84
height: 30px;85
width: 90px;86
text-indent: -1px;87
}88
</style>89
</head>90
<body>91
<div>92
<div id="test1" width="10">93
<form method="POST">94
<input type="file" id="upload_flbox" length="10" name="upload_flbox" onchange="list_images(this.value);">95
<input type="button" id="upload_btn" name="button1" value="添加图片" onclick=javascript:document.getElementById("upload_flbox").click();>96
</form>97
</div>98
<div id="d_imagetab">99
</div>100
</div>101
</body>102
</html>
浙公网安备 33010602011771号