jquery - jQuery：使一个按钮模拟另一个按钮

Question

如何使“删除”（我将其重命名为“替换”）按钮模拟浏览按钮？我的意思是当点击“删除”来实际浏览另一个文件时？

Answer 1

您可以使用 JQuery，有关工作示例，请参阅 jsfiddle http://jsfiddle.net/AF2c5/1 ：

HTML 标记：

<input type="file" id="fileButton" />
<button id="myButton">Delete</button>

和javascript：

$('#myButton').on('click', function() {
    $('#fileButton').click();
});

您还可以删除原始文件输入，仅使用自定义按钮浏览： http: //jsfiddle.net/AF2c5/2/：

<input type="file" id="fileButton" style="display: none" />

请注意，隐藏输入可能会在某些（移动）浏览器中中断。那么你最好将原始输入定位在屏幕之外而不是隐藏它，请参阅http://jsfiddle.net/AF2c5/3/：

<input type="file" id="fileButton" style="position: absolute;  top: -50%; left: -50%" />

希望能帮助到你。

Answer 2

如果“删除”按钮与“浏览”按钮具有相同的功能和目标，我会在目标上触发一个点击事件。

Answer 3

您始终可以在第二个按钮上使用 onclick javascript 事件。

例如，如果您有名为“file1”的文件输入标记和名为“form1”的表单内的按钮，则单击“file1”输入上的第二个按钮触发 click()。

就像是：

<form name="form1">
   <input name="file1" type=file />
   <button type="button" onclick="document.form1.file1.click()">replace</button>
</form>