在 JavaScript 中更新表单字段

本文关键字：表单 字段 更新 JavaScript | 更新日期: 2023-09-27 18:30:46

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

这是 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>

在 JavaScript 中更新表单字段

使用此代码 它会帮助你

<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>

我希望这对你有用。

$(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);
});

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

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

相关文章：