Question

我在引用jQuery中的元素时遇到了一些问题。我有一些代码通过单击另一个条目来唤起对其他输入条目的某些操作。它可以在以下代码中显示文件名。但是，如果我将输入条目放在表单标记中，则无法正确显示所选的文件名。有些专家可以解释一下如何使其发挥作用吗？

以下代码可以正常使用：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>


<style type='text/css'>
    input[type=file] {
    display:none
}
</style>

<script type='text/javascript'>
$(window).load(function(){
$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click()
    });
    $('#myFileInput').on('change', function () {
        var files = this.files;
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});
});

</script>
</head>   
<body>

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple/>

</body>
</html>

但是，如果按钮放在表单标签内，我不知道如何正确引用元素。以下代码不会正确显示所选文件：

<form action="" method="post" >
<fieldset >

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple/>

</fieldset>
</form>

如何解决这个问题？

Answer 1

您不需要$(window).load()和$(function () {});，因为在您的情况下，他们会做同样的事情。您还可以将return false添加到按钮单击事件中，这可能会解决您的问题。

http://jsfiddle.net/VzV7H/

<强> JS

$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click();
        return false;
    });

    $('#myFileInput').on('change', function () {
        var files = this.files;
        console.log(files);
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});

<强> HTML

<form action="" method="post">
    <fieldset>
        <button id="btn_myFileInput">Choose file...</button>
        <label for="btn_myFileInput">No file choosen or whatever...</label>
        <input type="file" id="myFileInput" multiple>
    </fieldset>
</form>

<强>更新

正如@cernunnos在评论中指出的那样，点击<input type="file">中不可见的<button>可能会在使用Internet Explorer时出现问题。

How to make IE8/9 submit input type="file" when javascript triggered dialog open

jQuery中id的元素引用？

1 个答案: