Question

我正在处理文件选择功能。他们点击一个按钮，弹出文件选择窗口，他们可以在那里选择文件，然后上传。这在一个常规的html页面上工作得很好，但是只要它放在一个bootstrap模式中，：file函数就会停止工作。

我尝试过搜索，但只查看了html5无效的实例。

是否有引导模式的代码可以阻止这种情况？这让我很难过。

//This is simply calling the file select method on the button
$('.attachFile').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]);
});


   //On a regular page this works fine, but within the bootstrap modal this is not being called
    $(':file').on('fileselect', function(event, numFiles, label) {
      console.log('I'm in here!!')
     });

HTML表单如下所示

<form enctype="multipart/form-data">
     <label class="btn btn-primary pull-left attachFile">
        <i class="fa fa-paperclip"></i> Attach
        <input name='media' type="file" style="display: none;">
      </label>
</form>

我没有收到任何错误，只是沉默。我不能断点，因为它是模态的内联脚本。（不是我想要的，但那是在我之前建造的，我无法改变它。）

Answer 1

我知道是1年11个月前，但是我遇到了同样的问题。我可能使用了相同的示例：） ==> https://stackoverflow.com/a/18164555/2910930

经过测试：Bootstrap 4（模态），模态（modal）的形式充满了ajax。

我使用“文档”作为主要选择器，所以我确信当使用ajax更改数据后事件发生更改时，它可以工作

ps，用于需要自定义触发器https://api.jquery.com/trigger/

的用户

// We can watch for our custom `fileselect` event like this
$(function () {

    // Use document instead as the start selector
    $(document).on('fileselect',":file", 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);
      }

    });
});


// 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]);
});

：fileSelect上的文件在bootstrap模态

1 个答案: