在 JavaScript 中拖放文件上传区 - SimpleDropit

版本:

浏览量:1043

最后更新：2021-09-06

应用标签：git MAC 软件 Jquery插件

推荐指数:

查看演示点击下载

详细信息

SimpleDropit 是一个 JavaScript 插件，可将任何标准文件输入转换为文件上传器的可定制、用户友好的拖放区。

可以在 jQuery 或 Vanilla JavaScript 中实现。

如何使用它：

1. 下载包并在页面上包含以下文件。请注意，jQuery 库是可选的。

<link rel="stylesheet" href="dist/css/simpledropit.min.css" />
<script src="dist/js/simpledropit.min.js"></script>

2. 在页面上创建标准文件输入。

<input type="file" name="files[]" id="example" multiple />

3. 在文件输入上初始化 SimpleDropit 插件并完成。

// jQuery
new SimpleDropit($('#example')[0]);
 
// Vanilla JS
new SimpleDropit(document.getElementById('example'));

4.拖放区的HTML结构应该是这样的：

<div class="sd-box sd-advanced-upload">
  <div class="sd-box-wrapper">
    <div class="sd-label-wrapper">
      <span class="sd-box-dragndrop">Drop file here /&nbsp;</span>
      <span class="sd-box-file-name"></span>
      <label class="sd-label">Browse <span class="sd-box-browse-file">File</span></label>
      <input type="file" name="files[]" id="example" multiple=""></div>
  </div>
</div>

5. 随意覆盖默认 CSS 以创建您自己的样式：

.sd-box {
  background-color: #ffffff;
  position: relative;
  padding: 25px 20px;
  width: 100%;
  text-align: center;
  border: 1px solid #EBE9E9;
  border-radius: 2px;
  line-height: 18px;
}

联系我们