Javascript 多个图像选择器

我有一个页面，该页面有两个图片选择器。我对其中一个进行了编码，以便在选择图片文件时显示图片。但我想单独使用它们。我试着把它作为附加代码。你能帮我把它们分开吗？另外，如何使用PHP、Javascript或jQuery分别创建清除按钮

我尝试了我的代码，它只对一个选择器有效，而对另一个选择器无效

<form id="form1">
    <input type="file" id="image-1-selector">
    <img src="#" id="first-image">
    <button type="reset" onclick="clearFile(event)">Clear</button><br /><br />

    <input type="file" id="image-2-selector">
    <img src="#" id="second-image">
    <button type="reset" onclick="clearFile(event)">Clear </button>
</form>

---

首先，您可以使用类而不是ID来选择元素，从而使代码干涸。从那里，您可以使用DOM遍历方法（在本例中是

next（）

和

prev（）

）来查找需要修改的元素。试试这个：

<form id="form1">
    <input type="file" class="image-selector">
    <img src="#" class="preview">
    <button type="reset" class="clear">Clear </button><br /><br />

    <input type="file" class="image-selector">
    <img src="#" class="preview">
    <button type="reset" class="clear">Clear </button>
</form>

---

这是我的示例代码，它不像我问的那样工作

var clearFile=function（event）{

不会在JSFIDLE上工作。是的，但你知道它是什么，对吗？