我有一个由PHP生成的页面
echo '
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Story Submission Page</title>
<link rel="stylesheet" type="text/css" href="petercort.css" />
<script type="text/javascript" src="javascript.js">
</script>
</head>
';
echo '
<div id="submissionform">
<p><u><strong>Post Submission</strong></u></p>
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="title">Title: </label>
<input type="text" name="title" id="title"><br>
<br>
<label for="summary">Summary: [TXT FILE]</label>
<input type="file" name="summary" id="summary"><br>
<br>
<label for="story">Story: [TXT FILE]</label>
<input type="file" name="story" id="story"><br>
<br>
<label for="previewpicture">Preview Picture: [PNG FILE]</label>
<input type="file" name="previewpicture" id="previewpicture"><br>
<br>
<label for="contentpicture">Content Pic: [PNG File]</label>
<input type="file" name="contentpicture" id="contentpicture"><br>
<button onclick="addPictureLine()">Add Another Picture</button>
<br>
<input type="submit" name="submit" value="submit"><input type="reset" name="reset" value="reset">
</form>
</div>
</body>
</html>
';
}
}
else {
header('Location: adminpanel.html');
}
和关联的 JavaScript 代码
function addPictureLine() {
document.write("<label for='contentpicture'>Content Pic: [PNG File]</label> <input type='file' name='contentpicture' id='contentpicture'><br>")
}
它可以工作，但是当我单击按钮为用户添加另一行以将另一张图片添加到提交中时，会将我发送到一个空白页面，其中只有 document.write（） 信息。 我希望它在现有页面中添加另一行，以便我可以上传多张图片。
当网页已包含内容时，document.write会覆盖该内容。
您应该使用 innerHTML 属性将文本插入到 DOM。这是一个例子;
var div = document.createElement('div');
div.innerHTML = 'My content';
document.appendChild(div);