jQuery动态添加

说明如下：

1. 为上传按钮添加点击事件

点击上传按钮，会触发文件选择窗口。首先，添加一个选择上传文件的按钮。

<button id="file-select-button">选择文件</button>

在页面中加入以上代码。接着，使用jQuery为按钮添加点击事件，以触发弹出文件选择窗口。

$(document).ready(function() {
  $('#file-select-button').click(function() {
    $('#file-select-input').trigger('click');
  });
});

当用户单击“选择文件”按钮时，会触发“click”事件。该事件将ID为“file-select-input”的元素的“click”事件也触发，弹出文件选择窗口。

<input id="file-select-input" style="display:none" type="file">

ID为“file-select-input”的元素是通过jQuery添加的，当单击按钮“file-select-button”时，将触发该元素的“click”事件。样式“display:none”是控制该文件上传元素不可见的CSS属性。

2. 显示上传的文件名

用户选择了要上传的文件后，可以选择在页面上显示文件名，提供将要上传的文件的信息。添加以下代码，当用户选择文件后，将文件名显示在页面上。请在前面的代码块中添加以下代码：

$(document).ready(function() {
  $('#file-select-input').change(function() {
    var file_input = $('#file-select-input');
    var selected_file_name = file_input.val().split('\\').pop();
    $('#file-name').html(selected_file_name);
  });
});

在选择要上传的文件完成后，以上代码会将文件名显示在具有ID为“file-name”的元素上。

<div id="file-name"></div>

示例1

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态添加上传文件控件</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#file-select-button').click(function() {
        $('#file-select-input').trigger('click');
      });

      $('#file-select-input').change(function() {
        var file_input = $('#file-select-input');
        var selected_file_name = file_input.val().split('\\').pop();
        $('#file-name').html(selected_file_name);
      });
    });
  </script>
</head>
<body>
  <button id="file-select-button">选择文件</button>
  <input id="file-select-input" style="display:none" type="file">
  <div id="file-name"></div>
</body>
</html>

示例2

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态添加上传文件控件</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#add-file-button').on('click', function(e) {
        e.preventDefault();
        $('div#upload-wrapper').append('<input type="file" class="upload-file" name="uploadfile[]" />');
      });
    });
  </script>
</head>
<body>
  <div id="upload-wrapper">
    <input type="file" class="upload-file" name="uploadfile[]" />
  </div>
  <button id="add-file-button">添加文件</button>
</body>
</html>

以上示例中，使用jQuery动态添加了一个文件上传控件，并使用了一个“添加文件”按钮（示例2），允许用户添加多个文件。类似地，您可以将文件上传控件添加到HTML表单中，允许用户上传文件并提交表单。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery动态添加 - Python技术站

1. 为上传按钮添加点击事件

2. 显示上传的文件名

示例1

示例2

相关文章