Question

我的网站上有一个用于上传图片的表单。表单有效，但Javascript并没有按照我的预期行事。我想要它做的是，当我使用＆＃34;浏览＆＃34;选择图像时。按钮，用文件名更新相邻的输入字段。谁能明白为什么这不起作用？

这是HTML：

<div class="input-group">
    <span class="input-group-btn">
        <span class="btn btn-danger btn-file">
            Browse… <input type="file" name="Image" multiple="">
        </span> 
    </span>
    <input type="text" class="form-control filename" readonly="">
</div>

这是Javascript：

<script type="text/javascript">
    $(document).on('change', '.btn-file :file', function() {
        var input = $('.filename'),
            numFiles = input.get(0).files ? input.get(0).files.length : 1,
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
    });
</script>

Answer 1

使用此代码它可以帮助您

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.btnEdit{display:none;}
</style>
</head>
<script type="text/javascript">
    $(document).on('change', '.btn-file :file', function() {
      var fileName = $('#uploadfile').val();
      $('.filename').val(fileName);
    });
</script>
<div class="input-group">
    <span class="input-group-btn">
        <span class="btn btn-danger btn-file">
            Browse… <input id = 'uploadfile' type="file" name="Image" multiple="">
        </span> 
    </span>
    <input type="text" class="form-control filename" readonly="">
</div>

Answer 2

我希望这对你有用。

$(document).on('change', '.btn-file :file', function(value) {
console.log(value);
    var input = $('.filename'),
        numFiles = value.target.files ? value.target.files.length : 1,
        label = value.target.files[0].name.replace(/\\/g, '/').replace(/.*\//, '');
    input.val(label);
});

我在更改事件中添加了 value 作为参数，之后该变量用于从元素中获取文件名。

对于测试，您可以从此处进行测试：http://jsfiddle.net/u4od6b2L/

在JavaScript中更新表单字段

2 个答案: