javascript - 如何单击带有按钮的隐藏输入文件的行

Question

我需要替换原来的input type="file"用<button>与 Bootstrap 风格。这个想法是用 jquery 隐藏它 hide()首先。然后用一个按钮触发它。

只有一个按钮时一切正常。但是每当添加另一个按钮时。选择对话框根据文件输入的个数不断显示。

我需要每个按钮来选择它的输入文件。所以我给它一个带有通配符选择器的唯一 ID。它仍然不起作用。这是代码。

HTML

<form method="get" action="">File Upload 1.
    <input type="hidden" name="sid" value="1" />
    <input type="file" name="file1" id="file1" />
    <button type="button" id="browse1" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i>&nbsp;Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 2.
    <input type="hidden" name="sid" value="1" />
    <input type="file" name="file2" id="file2" />
    <button type="button" id="browse2" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i>&nbsp;Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 3.
    <input type="hidden" name="sid" value="3" />
    <input type="file" name="file3" id="file3" />
    <button type="button" id="browse3" class="btn btn-primary"> <i class="glyphicon glyphicon-upload"></i>&nbsp;Upload</button>
</form>
<hr />

Javascript

$(document).ready(function () {
    $('input[id^=file]').hide();
    $('button[id^=browse]').click(function () {
        $('input[id^=file]').click();
    })
});

此处演示:http://jsfiddle.net/nobuts/txvq7hxv/4/

请帮帮我! :(

Answer 1

如果你想要的不止一个，最好不要使用 id! 试试这个 http://jsfiddle.net/txvq7hxv/6/ 注意:这是一个快速 hack，不是为了重用。

JavaScript

$(document).ready(function () {
$('input[id^=file]').hide();
$('.browse').click(function () {
    console.log(this);
    $(this).closest('form').find('input[id^=file]').click();
})
});

HTML

    <form method="get" action="">File Upload 1.
    <input type="hidden" name="sid" value="1" />
    <input type="file" name="file1" id="file1" />
    <button type="button" id="browse" class="btn btn-primary browse"> <i class="glyphicon glyphicon-upload"></i>&nbsp;Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 2.
    <input type="hidden" name="sid" value="1" />
    <input type="file" name="file2" id="file2" />
    <button type="button" id="browse" class="btn btn-primary browse"> <i class="glyphicon glyphicon-upload"></i>&nbsp;Upload</button>
</form>
<hr />
<form method="get" action="">File Upload 3.
    <input type="hidden" name="sid" value="3" />
    <input type="file" name="file3" id="file3" />
    <button type="button" id="browse" class="btn btn-primary browse"> <i class="glyphicon glyphicon-upload"></i>&nbsp;Upload</button>
</form>
<hr />