时间戳

首页 > 解决方案 > 文件上传后如何弹出表单

javascript - 文件上传后如何弹出表单

问题描述

一个文件上的文件上传按钮和另一个文件中的弹出表单（“/uploadFile”）。我想在上传文件提交/点击“确定”后弹出表单。

这是我的第一个文件 index.html，其中有包含上传文件按钮的列表：

<li><a href="/uploadFile"><input type="file" id="hiddenUploadField"  style="display: none;" accept=".dxf, .dwg"
            class="upload" data-toggle="modal" data-target="#importData">
            <label for="hiddenUploadField"><i class="fas fa-folder-open"></i>&nbsp;<span>Import</span></label></a>
          </li>

在文件末尾，我将此代码用于弹出模式：

<div class="modal fade text-center" id="importData" >
<div class="modal-dialog modal-lg">
  <div class="modal-content">
  </div>
</div>

触发弹窗的代码是：

$('#hiddenUploadField').change(function (e) {
var node = $('#appBuckets').jstree(true).get_selected(true)[0];
var _this = this;
if (_this.files.length == 0) return;
var file = _this.files[0];
switch (node.type) {
  case 'bucket':
    var formData = new FormData();
    formData.append('fileToUpload', file);
    formData.append('bucketKey', node.id);
    $.ajax({
      url: '/api/forge/oss/objects',
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function (data) {
        $('#appBuckets').jstree(true).refresh_node(node);
        _this.value = '';
      }
    });
    break;
}
$('#importData').modal('show').find('.modal-content').load($(this).attr('href'));
});
}

问题是当我在文件窗口上单击“确定”时，它没有显示模式弹出框。它只是淡化背景，什么都不做。

标签： javascripthtmlnode.js

解决方案

您显示模态的代码需要在更改函数内部，如下所示

$('#hiddenUploadField').change(function (e) {
    // your code goes here for the modal.
    $('#importData').modal('show').find('.modal-content').load($(this).attr('href')); }
});

推荐阅读