在动态表中显示正确的输入文件名

时间:2017-10-03 12:35:31

标签: javascript html function

我的表格中有一个简单的添加功能。 我想在表格上发布每个上传文件的名称,但由于我的 var i = 0; 无法正常工作,因此它似乎仅适用于前两行。 这是我的代码:

<table id='datarows'>
<tr>
<td>Upload</td><td>Filename</td>
</tr>
<tr>
<td><input type="file" id="ProductImage" name="ProductImage0" onchange="getFileData(this);"/></td>
<td><input id="filename" name="filename0" type="text" /></td>
</tr>
</table>

 <a href="javascript:void(0)" onclick="addProduct()">ADD NEW PRODUCT</a><br />

<script>

var i = 0;
function addProduct() {
var str =   '<tr><td><input type="file" id="ProductImage'+i+'" 
name="ProductImage'+i+'"  onchange="getFileData2(this);" /></td>'
str = str + '<td ><input id="filename'+i+'" name="filename'+i+'" type="text" 
/></td></tr>';
$('#datterrows').append(str);
}

//----- Upload picture/file and add name table 1
function getFileData(myFile) {
    var file = document.getElementById("ProductImage").value;
    var msg = document.getElementById("filename");
    msg.value = "test"+file; 
}

//----- Upload picture/file and add name table 2
function getFileData2(myFile) {
    var file = document.getElementById("ProductImage"+i).value;
    var msg = document.getElementById("filename"+i);
    msg.value = "test" + file;
}

</script>

我没有得到任何错误,但我看到的只是我的输入id不断重复它自己是productimage0而不是为我添加的每个元素继续。 我希望有人可以提供帮助,这在a **中很痛苦

0 个答案:

没有答案