jQuery-Filer.js

jQuery-Filer.js 是一个基于 jQuery 的文件上传插件，可以帮助程序员实现各种文件上传的需求。它具有一些特性，比如：可支持多文件上传、自定义文件过滤、可预览文件、可改变上传队列顺序等。此外，为了保护用户的上传数据，该插件还支持在服务器端上添加限制和安全策略。

特点

1. 多文件上传 - 支持上传多个文件，而不需要在一个接一个地上传。
2. 自定义文件过滤 - 支持客户端和服务器端的过滤器，可以过滤出指定类型的文件。
3. 文件预览 - 支持图像、视频、音频等常见类型的预览。
4. 队列排序 - 可以通过鼠标拖拽来改变上传文件队列的顺序。
5. 限制文件大小 - 支持设置最大文件大小，以保护上传的内容。
6. 安全策略 - 可以在服务器端代码中进行一些安全检查，以保证上传的文件无害。

用例

引入文件

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-*************" crossorigin="anonymous"></script>
<script src="jquery.filer.min.js"></script>
<link href="jquery.filer.css" type="text/css" rel="stylesheet" />

开始编码

<div class="demo">
  <input type="file" name="files[]" multiple>
</div>

$('.demo input').filer({
    showThumbs: true,
    addMore: true
});

参数选项

• allowDuplicates - 上传队列中是否允许更多的复制文件。
• appendTo - 上传组件附加到目标元素的元素。
• captions - 配置插件使用的字符串。
• changeInput - 在服务器端进行文件过滤。
• disableContextMenu - 禁用右键上下文菜单。
• dragDrop - 绑定拖放上传的容器。
• extensions - 允许上传的文件扩展名。
• limit - 允许上传到上传队列中的最大文件数。
• limitSize - 允许上传的最大文件大小。
• name - 当上传文件时要使用的表单名称。
• templates - 自定义插件使用的HTML模板。

事件和回调函数

• beforeRender - 在组件渲染之前执行。
• beforeShow - 在组件显示之前执行。
• beforeUpload - 在文件上载之前执行。
• onerror - 在上传发生错误时执行。
• onInit - 在组件初始化完成后执行。
• onSelect - 在选择文件后执行。
• onRemove - 在文件被删除之前执行。
• onEmpty - 上传队列为空时执行。
• onSort - 当队列排序时执行。
• onTotalProgress - 当队列中的所有文件上传时执行。
• onProgress - 在每个文件上传时执行。
• onComplete - 在所有文件上传完成时执行。
• onUploader - 在向服务器上传文件时执行。
• inputAttr - 在创建file input元素时指定其属性。
• beforeFileRemove - 在文件被从队列中删除之前执行。

支持的浏览器

• Internet Explorer 10+
• Microsoft Edge
• Google Chrome
• Apple Safari
• Firefox

结论

通过 jQuery-Filer.js 插件，我们可以轻松地实现各种文件上传需求。它是一个可定制的、易于使用的、高效的插件，支持多文件上传、自定义文件过滤、文件预览、队列排序、限制文件大小和安全策略等，可以帮助程序员在应用程序中实现高效的文件上传体验。