我编写了一个 html + javascript 表单，它显示一组图像以及一个提交按钮。用户可以选择他或她感兴趣的图像，当用户单击图像时，我会更改图像边框以指示图像选择。
当用户点击提交按钮时，我希望我的服务器端脚本接收与所选图像关联的图像 uri，以进行进一步处理。
我是 JS 新手。我想知道如何最好地做到这一点。我是否需要一个使用所选图像 URI 填充的全局 javascript 数组？然后这个数组可以作为 HTTP POST 的一部分提交吗？
任何提示/指针都会有所帮助。
【问题讨论】：
标签： javascript html image uri
如果我是你，我会确保它在没有 JavaScript 的情况下也能工作。例如
<form action="" method="POST">
<label for="image_1">
<img src="image_1_uri" alt="Image 1" />
<input type="checkbox" name="images" id="image_1" value="image_1_uri" />
</label>
<label for="image_2">
<img src="image_2_uri" alt="Image 2" />
<input type="checkbox" name="images" id="image_2" value="image_2_uri" />
</label>
<input type="submit" />
</form>
然后调整添加边框的 JavaScript 以在单击标签而不是图像时工作。
如果您不希望它们出现，请通过 CSS 隐藏复选框。 （您需要在复选框中添加一个类才能在旧版本的 Internet Explorer 中执行此操作。）
【讨论】：
试试这个：
//...let's suppose this is the image you change the border of on click..
<img src="whatever" onclick="createHidden(this);" />
<script type="text/javascript">
function createHidden(field)
{
var hdn = document.createElement("input");
hdn.setAttribute('type', 'hidden');
hdn.setAttribute('name', 'hdn[]');
hdn.setAttribute('value', field.src); // populate images src now
var frm = document.getElementsByTagName("form")[0];
frm.appendChild(hdn);
}
</script>
现在您可以在服务器端脚本的 hdn 数组中访问图像的路径。
【讨论】：