Question

我正在尝试编写一个html / javascript集（在PHP中解释），允许用户从a中选择一个文件，然后一旦选择该文件，它就会显示另一个文件。

function displayFileInput() {
var counter = document.getElementById("counter").value;
var n = (parseInt(counter)+1).toString();
var element = document.getElementById("container");
var string = "<br /><input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\"  />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\"  />";
element.innerHTML = element.innerHTML + string;
document.getElementById("counter").value=n;
return false;}

我正在使用的HTML代码是：

<form enctype=\"multipart/form-data\" method = \"post\" action=\"newPost.php\" id = \"rental_form\">
<input type = \"text\" name = \"rent_name\" size = \"30\" value = \"Insert your post title here\"/><br />
<textarea rows= \"20\" cols = \"100\" name = \"rent_posttext\">
Insert your post text here!
</textarea><br />
<div id = \"container\">
<input type = \"file\" name = \"file1\" onchange = \"javascript:displayFileInput()\" />
Default:<input type = \"radio\" name = \"main_picture\" value = \"1\"  />
</div>
<input type = \"submit\" />
<input type = \"text\" id = \"counter\" value = \"1\" style = \"display:noe;\">

一切似乎都起作用，但问题是这样的：一旦我选择了一个文件，它就会正确显示另一个文件框，但会删除前一个文件中的信息。例如，在谷歌浏览器中，“选择文件”输入按钮旁边会显示“未选择文件”。

当我将表单提交到我的PHP脚本时，它会识别这些文件，但每个文件都会记录一个“4”错误，这意味着没有上传任何文件。不知何故，它在动态生成新文件输入时摆脱了所有文件信息。救命啊！

Answer 1

您的问题是由以下部分引起的：

element.innerHTML = element.innerHTML + string;

这完全取代了元素的内容，并消除了过程中之前的所有用户选择。如果您使用appendChild而非innerHTML = ...;，则会获得更好的结果，但这需要重新编写代码。

这样的事情应该有效：

function displayFileInput() {
    var counter = document.getElementById("counter").value;
    var n = (parseInt(counter)+1).toString();
    var element = document.getElementById("container");
    var newInput = document.createElement("div");
    var string = "<input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\"  />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\"  />";
    newInput.innerHTML = string;
    element.appendChild(newInput);
    document.getElementById("counter").value=n;
    return false;
}

示例：http://jsfiddle.net/dsKFr/

此外，您无需转义HTML标记中的所有引号。只是JavaScript版本（甚至在那里你可以通过用双引号替换单引号来解决它。）

使用Javascript动态生成文件上传框

1 个答案: