javascript动态元素(多文件上传)
来源:互联网 发布:外观侵权怎么处罚淘宝 编辑:程序博客网 时间:2024/06/06 05:27
有时候需要上传多个文件,同时还不确定上传文件的数量,这时就可以使用动态增加<input type=”file”>元素的方法来实现;
代码如下:
<input type="button" value="增加" onclick="MoreFile()" /><br />
<input type="hidden" value="1" id="filecount" name="filecount" />
<div id="CaseFilesDIV">
<div><input type="text" size="38" id="morefile1_show" value="" />
<input type="file" class="file1" name="morefile1" id="morefile1" onchange="$('#morefile1_show').val(this.value);" />
<input type="button" id="Button1" value="浏览" onclick="$('#morefile1').click()" /></div>
</div>
Javascript:
function MoreFile()
{
var fc = document.getElementById("filecount");
var iv = parseInt(fc.value,10);
fc.value = iv + 1;
var nfstr = "morefile"+fc.value;
var ndiv = document.createElement("div");
ndiv.innerHTML = "<input type=\"text\" size=\"38\" id=\""+nfstr+"_show\" value=\"\" /><input type=\"file\" class=\"file1\" name=\""+nfstr+"\" id=\""+nfstr+"\" onchange=\"$('#"+nfstr+"_show').val(this.value);\" /><input type=\"button\" id=\"Button1\" value=\"浏览\" onclick=\"$('#"+nfstr+"').click()\" />";
var mydiv = document.getElementById("CaseFilesDIV");
mydiv.appendChild(ndiv);
}
Style:
.file1 {
cursor: pointer;
font-size: 22px;
left: 0;
opacity: 0;
position: absolute;
top: 11110px;
}
上面有两处比较特殊的;
第一是input file的实现,用了三个input来模拟单独的file控件,因为在不同的浏览器中input file的表现会出现巨大的差别,用三个input就能实现不同环境下的界面统一;
第二是用了一个parseInt来做中间数字计算,如果没有这个过程,出来的就会是id=”morefile1111”这样的内容了。
- javascript动态元素(多文件上传)
- javascript弹出窗口实现动态文件上传
- javascript:多文件上传
- 多文件上传(动态增加 FileUpload)
- php动态多文件上传
- struts 动态多文件上传
- php动态上传多文件
- javascript 元素动态创建
- Javascript 动态增减元素
- JavaScript实现多文件上传
- 利用javascript向网页中动态添加文件上传框
- javascript实现动态添加和删除文件上传选项
- Javascript多个文件的上传(本地显示)
- asp.net 动态多文件上传
- 动态,同时上传多个文件
- 动态的添加多个上传文件
- javascript动态创建页面元素
- javaScript 动态访问JSon元素
- Undefined symbols for architecture i386
- 简单两步制作本地镜像YUM源
- JavaSE_设计模式_装饰模式
- 使用fn_dblog解析SQL SERVER 数据库日志方法
- 利用matlab中绘制多条y轴
- javascript动态元素(多文件上传)
- 20个非常有用的PHP类库
- linux 高效的文件系统事件监控 内核级解析方案 inotify
- ios 面试或自我考察的10个问题
- b MAIN 和 ldr pc,=MAIN 的区别(谈到代码位置无关性)
- KMeans聚类算法(转载)
- linux shell实现URL 编码/解码
- Navigation Bar 修改问题(二)------ Launcher与应用之间切换
- MDK 5.01 中文输入设置 (不再出现半个字)