最近公司要做一个多文件上传的组件。就是类似于GMAIL和腾讯邮箱的附件上传一样。。
基本实现原理如下:
1、利用javascript 动态添加和删除单元格行。来生成 《文件名 删除》这样结构 的行
比如:我选择多个要上传的文件。那么文件列表应该是
文件名1 删除
文件名2 删除
文件名3 删除.....
单元行的添加很简单。。用insertRow 和insertCell,appendChild就可以实现,但是单元行的删除就有点麻烦了。因为deleteRow(index) 的参数是表格行的索引,也就是它的实际位置。所以,删除的时候是无法用ID来删除的,而且我要删除哪一行也是不确定的。因为无法通过表格知道它的实际位置。因为,我又弄了一个数组来和生成的行的ID相对应。
比如 我上传了8个文件 那么数组的值就是 1,1,1,1,1,1,1,1,1。这8行的ID分别是tr0 tr1 tr2 tr3 tr4 tr5 tr6 tr7 tr8.如果我把第二行删了那么数组就变成1,0,1,1,1,1,1,1,1. 此时我删除第三行的时候,只要判断数组前3个元素是否有为0的值。如果有一个0就把行往前推一个。这样就可以找到真正的索引行
2.要实现多文件上传就必须要在页面保存多个<input type="file">,如果要实现美观的效果当然希望一直出现一个 <input type="file">。其他的都隐藏掉,隐藏的方法有很多中,CSS高手 应该是小菜一碟了,不过我不懂CSS,所以就用<p><input type="file"></p> 然后p.insertAdjacentElement ()的方法来实现。添加以后把上一个<input type="file">的大小设置为1. display的属性设置为none就可以了。
3。不能用替换innerHTML的方法来动态构造<input type="file">,这样的结果就会使<input type="file">的值丢失,post到服务器端后得到的httppostfile会是空值。所以只能把<input type="file">隐藏掉,无法动态删除。因为没有移除或重置单个<input type="file">的方法。如果用文本替换又会使<input type="file">的值丢失...所以刚好和上面的问题一样。用户删除一个已选择的上传文件的话。数组的对应值就为0.可以把这个数组返回给服务器端,服务器端通过这个数组的值来判断那个文件是用户最终打算上传的文件
4。服务器端获取客户端的值:可以通过设置客户端的<input type="hidden" runat="server">就可以在客户端设置这个隐藏域的值。然后在服务器端通过findcontrol方法就可以获取该值
5.客户端获取服务器端的值:可以通过xmlhttp,AJAXPro2组件,或者XML文件的方法传递。也可以通过4的方法,但是这样只能获取一维数组。不能获取对象的值
6。通过服务器端动态构造的客户端控件,在客户端只能用JS获取,而不能设置其值
7.服务器端的控件在客户端也是只能通过JS获取其值,而不能通过JS直接设置其值
以上只是个人经验。正确不正确我也不知道。欢迎高手指正!