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

Question

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

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;\">

一开始一切似乎都正常，但问题是这样的:一旦我选择一个文件，它就会正确显示另一个文件框，但会删除前一个文件中的信息。例如，在 Google Chrome 中，“选择文件”输入按钮旁边会显示“未选择文件。”

当我将表单提交到 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 版本(即使在那里，您也可以通过交替使用单引号和双引号来绕过它)。