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

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

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>