Question

我有一个jsp页面，我有一个输入类型文件，我允许用户浏览文件。我在jsp上有一个这样的输入，其余的由javascript动态生成。

这是我的jsp代码：

<div id="labelContainer" style="display:inline">
<table align="center">
<tr>
<td align="left"><input type="text" id="label0" name="label0" size="15"></td>
<td align="center"><input type="file" id="filePath0" name="browsetrainset0"></td>
<td id="addlabel" ><img src="../images/add.png" title="Add Label" onclick="addLabel()"></td>
<td id="removelabel"><img src="../images/remove.png" title="Remove Label" onclick="removeLabel('labelDiv0')"></td>
</tr>
</table>
</div>

这是我的javacsritp代码：

function addLabel(){
var text="";
lCount++;
text+=("<table id='labelDiv"+lCount+"' align='center'>");
text+=("<tr>");
text+=("<td align='left' style='display:none'><input type='checkbox' checked='true' name='labelchkbox'/></td>");
text+=("<td align='left' id='label'><input type='text' id='label"+lCount+"' name='label"+lCount+"' size='15'></td>");
text+=("<td align='center'id='filePath' ><input type='file' id='filePath"+lCount+"'name='browsetrainset"+lCoun t+"'></td>");
text+=("<td id='addlabel' ><img src='../images/add.png' title='Add Label' onclick='addLabel()'></td>");
text+=("<td id='removelabel'><img src='../images/remove.png' title='Remove Label' onclick=\"removeLabel('labelDiv"+lCount+"')\"></td>");
text+=("</tr>");
text+=("</table>");
document.getElementById("labelContainer").innerHTM L+=text;
}

但是一旦我点击添加标签并生成另一个输入类型文件，我无法在jsp页面上保留我浏览的文件路径的值。我正在使用IE7。请告诉我如何恢复浏览文件的值，以便我可以进一步使用它们。

Answer 1

document.getElementById（“labelContainer”）。innerHTM L + = text;

永远不要在innerHTML上使用+ =。它不符合你的想法。

相反，它费力地将div的全部内容序列化为HTML，将您的字符串添加到HTML代码中，然后将整个批次解析回对象。

这很慢，并且丢失了HTML字符串中无法记住的所有信息，例如JavaScript引用，事件处理程序（所有onclicks将停止工作）和表单字段内容（包括文件上载）。

您可以将所有新的HTML内容添加到临时容器中，然后使用DOM方法将其移动到目标：

var div= document.createElement('div');
div.innerHTML= text;
while (div.firstChild)
    document.getElementById("labelContainer").appendChild(div.firstChild);

或者您可以使用DOM方法直接创建和添加节点。在您的情况下，由于新节点与旧节点非常相似，您可以克隆它们：

function addLabel() {
    var container= document.getElementById('labelContainer');
    var tables= container.getElementsByTagName('table');
    var n= tables.length;
    var table= tables[0].cloneNode(true);

    table.id= 'labelDiv'+n;
    var inputs= table.getElementsByTagName('input');
    inputs[0].id=inputs[0].name= 'label'+n; 
    inputs[1].id=inputs[1].name= 'browsetrainset'+n; 

    container.appendChild(table);
}

（注意：IE在使用单选按钮等字段更改字段名称时会遇到一些问题。）

如果您希望在没有JavaScript的情况下访问（通常是个好主意），通常的方法是包含您可能的最大条目数，并使用脚本隐藏未使用的条目。

Answer 2

如果我没记错的话，就不可能以编程方式设置与<input type="file">元素关联的filepsec，因为这会构成安全风险，允许恶意脚本上传未经过特定选择的文件。用户。

设置filespec的唯一方法是从Web浏览器浏览到它。

在动态生成时保留输入类型文件在jsp文件中的值

2 个答案: