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

Question

I'm trying to write an html/javascript set (to be interpreted in PHP) that allows the user to select a file from a, and then as soon as that file is selected it displays another.

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;}

The HTML code I'm using is this:

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

Everything seems to work at first, but the problem is this: as soon as I select a file, it correctly displays another file box, but gets rid of the information in the previous file. For instance, in Google Chrome, next to the "choose file" input button it will say "No file chosen."

When I submit the form to my PHP script, it recognizes the files, but registers a "4" error for each one which means that no file was uploaded. Somehow, it's getting rid of all the file information when it dynamically generates a new file input. Help!

Answer 1

Your issue is being caused by the part that goes like:

element.innerHTML = element.innerHTML + string;

This is completely replacing the content of your element, and wiping out any previous user selection(s) in the process. You will get a better result if you use appendChild instead of innerHTML =...;, but that will require re-working your code a bit.

Something like this should work:

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;
}

Example: http://jsfiddle.net/dsKFr/

Also, you don't need to escape all the quotes in your HTML markup. Just the JavaScript version (and even there you could get around it by alternating single quotes with your double quotes).