Question

我想创建一个发送问题的页面。因此，人们可能希望上传包含该问题的图像。整个页面使用bootstrap。我查看了Google，最喜欢https://codepen.io/claviska/pen/vAgmd。最后的解决方案似乎很好但我没有在文本框中获取文件名。我究竟做错了什么？我使用笔中显示的代码：

<div class="form-group">
<label for="files">Select some screenshots to append</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse&hellip;
<input type="file" name="files" single>
</span>
</span>
<input type="text" class="form-control" readonly>
</div>

JS：

$(function() {

    // We can attach the `fileselect` event to all file inputs on the page
    $(document).on('change', ':file', function() {
        var input = $(this),
            numFiles = input.get(0).files ? input.get(0).files.length : 1,
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
    });

    // We can watch for our custom `fileselect` event like this
    $(document).ready(function() {
        $(':file').on('fileselect', function(event, numFiles, label) {

            var input = $(this).parents('.input-group').find(':text'),
                log = numFiles > 1 ? numFiles + ' files selected' : label;

            if (input.length) {
                input.val(log);
            } else {
                if (log) alert(log);
            }

        });
    });

});

我的完整页面：http://gelbpunkt.troet.org/browsercheck/issue.php 包括Bootstrap，以及jQuery。

Answer 1

设置警报所在位置的输入字段的值，但首先为输入字段指定一个ID，如 fileName ：

<input type="text" id="fileName" class="form-control" readonly>

然后在你的jquery中，删除警报并在那里设置文件名：

if( log ){
  //alert(log);
  $("#fileName").val(log);
}

请参阅sample

使用JS引导文件输入（在PHP中）

1 个答案: