javascript动态元素(多文件上传)

有时候需要上传多个文件,同时还不确定上传文件的数量,这时就可以使用动态增加<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”这样的内容了。

猜你喜欢

转载自ffhhj9ab.iteye.com/blog/2000284