我想在 boostrap4 的输入 type="file" 中显示所选文件的名称 [重复]

Posted 2023-05-08

【中文标题】我想在 boostrap4 的输入 type="file" 中显示所选文件的名称 [重复]

【英文标题】：I want to display the name of selected file in my input type="file" in boostrap4 [duplicate]

【发布时间】：2021-12-29 11:33:48

【问题描述】：

这是我的 javascript 文件。

var total_image = 1;

//add more images for products

function add_more_images()


total_image++;
var html='<div class="form-group" id="add_image_box'+total_image+'"><label>Image</label><div class="input-group form-group" ><div class="custom-file"><input type="file" name="image[]" accept="image/*" class="custom-file-input changeme" id="exampleInputFile" required><label class="custom-file-label" for="exampleInputFile">Choose Image...</label></div>&nbsp;&nbsp;<div class="input-group-append"><button class="btn btn-danger" type="button" onclick=remove_image("'+total_image+'")>Remove Image</button></div></div></div>';
jQuery('#image_box').after(html);

这是我的 .php 文件

<div class="form-group">
                    <label>Image</label>
                    <div class="input-group form-group" id="image_box">
                        <div class="custom-file">
                            <input type="file" name="image[]" accept="image/*" class="custom-file-input" id="exampleInputFile" required>
                            <label class="custom-file-label" for="exampleInputFile">
                                Choose Image...
                            </label>
                        </div>&nbsp;&nbsp;
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button" onclick="add_more_images()">Add Another Image</button>
                        </div>
                    </div>
                </div>

我想在我的项目中添加多个图像，我已经尝试过这段代码

$('input[type="file"]').change(function(e) 
       var fileName = e.target.files[0].name;
       // change name of actual input that was uploaded
       $(e.target).next().html(fileName);
    );

还有这个

$('input[type=file]').change(function(e)
      $in=$(this);
      $in.next().html($in.val());
    );

它正在显示图像名称，但仅适用于我的 .php 文件中的输入 type="file" 但是当我单击 add_more_images() 以及将 type="file" 的新输入字段添加到我的表单，当我在该字段中添加图像时，特定字段未显示所选图像名称，请帮助我。

【参考方案1】：

问题在于您动态创建的输入的change事件，首先，您需要引用HTML中从头开始存在的元素，然后使用方法on引用输入，也不要在函数add_more_images 中使用after，而是使用append，因为您的新元素将在image_box 元素之外，并且当您创建新输入时不会像您预期的那样工作：

var total_image = 1;

//add more images for products

function add_more_images()


  total_image++;
  var html='<div class="form-group" id="add_image_box'+total_image+'"><label>Image</label><div class="input-group form-group" ><div class="custom-file"><input type="file" name="image[]" accept="image/*" class="custom-file-input changeme" id="exampleInputFile" required><label class="custom-file-label" for="exampleInputFile">Choose Image...</label></div>&nbsp;&nbsp;<div class="input-group-append"><button class="btn btn-danger" type="button" onclick=remove_image("'+total_image+'")>Remove Image</button></div></div></div>';
  jQuery('#image_box').append(html);


$(document).ready(function()

  $('#image_box').on('change', 'input[type="file"]', function(e) 
      var fileName = e.target.files[0].name;
      // change name of actual input that was uploaded
      $(this).next().html(fileName);
  );

)