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”这样的内容了。