简单介绍

官方地址:Dropify — Override your input files with style.

仓库地址:JeremyFagis/dropify: Override your input files with style


第一次看到它的时候,就被它优雅的样式给打动了,相对于 bootstrap-fileinput,Dropfiy 要小众不少,可能是因为它的功能比较单一吧,但是功能简单往往也是一个优势。很多时候,我们并不需要特别多的功能,刚好解决你的痛点就足够了。


像浏览器的上传样式太过于单一,这就是痛点。dropify 就是为此而生,它的介绍就是:Override your input files with style,看一下:


image.png


鼠标停上去,还有动画效果。


引入文件

基于 jQuery 的插件,需要引入 jQuery 就不用说了,然后引入它的 css 文件以及 js 文件即可。如下:


<!-- dropify -->
<link rel="stylesheet" href="/dropify/dist/css/dropify.min.css">

<!-- dropify -->
<script src="/dropify/dist/js/dropify.min.js"></script>


前台 HTML

这个没什么特殊,就是普通 file 类型 input,如下:


<input type="file" name="file" id="file" multiple>


multiple 代表支持多文件,但需注意的是:该插件只能预览一个文件。


JS 调用

调用方式没什么特殊的,几乎所有基于 jQuery 的插件调用方式都是一样的。如下代码:


$('#file').dropify();


这样就可以得到默认样式了,如果没有特殊要求,默认样式就可以满足样式改善的需求了。当然它还提供了一些参数可供调配,可调样式的参数如下:



校验相关参数如下:



还有一些事件的监听,比如移除文件时触发动作,发生错误时的触发动作等等事件,可以说,该插件麻雀虽小,五脏俱全,是一个非常标准的 jQuery 插件。


如果还需了解具体参数的实际效果,建议你 fork 该仓库,pengloo53/js-plugin-example: JS 插件文档库示例代码,然后在本地调试参数。


示意图如下:


image.png


image.png


后台返回

该插件不提供后台交互,仅仅是表单 file 类型 input 的样式增强以及校验功能