Question

我有一个“面板体”，我可以在其中删除csv文件并填充一些字段。

ejs文件：

<div class="panel-body">
    <div id="fileUpload">click to upload file</div> 
 </div>

js file：

function theUploader() {
  $('#fileUpload').fileReaderJS({
    dragClass: 'drag',
    readAsDefault: 'Text',
    on: {
      load: theUpload
    }
  });
}

现在，我希望不仅可以拖动文件，还可以点击click to upload file字段并打开本地目录。

所以，我试过了：

<div class="panel-body">
    <span class="btn btn-default btn-sm fileinput-button">
            <span>click to upload file</span> 
                <input id="fileUpload" type="file" name="files[]" data-url="/upload" multiple>     
            </span>
</div>

现在，我可以拖动或打开本地目录，但是：

1）将文件拖入其中时，click to upload file所在的区域不再突出显示。

2）上面的区域宽度比以前小（可能是因为现在使用fileinput按钮跨度，它在单词click to upload file周围创建了一个边框，这在初始设置中不存在，只使用了拖动选项）

Answer 1

您可以隐藏<input type="file">，然后在放置区域点击触发器点击该隐藏输入。

<强> HTML

<input type="file" />

<div class="panel-body">
  <div id="fileUpload">click to upload file</div>
</div>

<强> CSS

input[type=file] {
  display: block;
  height: 0;
  width: 0;
}

<强>的jQuery

$('#fileUpload').click(function() {
    $('input[type=file]').trigger('click');
});

在此完整测试https://jsfiddle.net/4n73ksxs/

修改

以下是FileReader.js的完整演示，其中包含您需要的更改代码https://jsfiddle.net/ju5h1n6t/

您可以看到底部只添加了此代码：

$('input[type=file]').hide(); $('#dropzone').click(function() { $('input[type=file]').trigger('click'); });

上传文件时突出显示区域

1 个答案: