表单/表格
Dropify - 可拖拽上传文件jQuery控件
PetitQ
dropify 是一款可以拖拽文件到指定区域进行文件上传的 jQuery 表单文件上传控件美化插件。该 jQuery 文件上传控件对原生的 input 元素进行了美化使其能够直接拖动文件到指定区域进行文件的上传操作。
使用方法
使用该文件上传美化插件需要引入 jQuery，dropify.js 和 ropify.css 文件，以及 dist/fonts 目录下的所有文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="dist/css/dropify.min.css">
<script src="js/jquery.min.js"></script>
<script src="dist/js/dropify.min.js"></script>
HTML 结构
该文件上传控件美化插件最基本的 HTML 结果是使用一个带 dropify class 的 input[type='file']元素来制作。
<input type="file" id="input-file-now" class="dropify" data-default-file="" />
初始化插件
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该文件上传控件美化插件。
$('.dropify').dropify();
配置参数
defaultFile：input 元素中是否有默认的文件。可以在初始化插件使配置该参数，或直接在 DOM 元素上标注 data-default-file="url_of_your_file"（建议这样做）
<input type="file" class="dropify" data-default-file="url_of_your_file" />
height：可拖拽文件上传区域的高度。例如你想设置 300 像素的高度，可以在 DOM 元素中设置 data-height="300"。
<input type="file" class="dropify" data-height="300" />
maxFileSize：设置上传文件大小的最大值。如果上传的文件大小大于这个值，将会弹出一个错误对话框。你可以使用 K，M 或 G 为单位。
<input type="file" class="dropify" data-max-file-size="3M" />
disabled：通过 disabled="disabled"可以禁用该文件上传控件。
<input type="file" class="dropify" disabled="disabled" />
disableRemove：使用 data-disable-remove="true"可以禁用 remove 按钮。
<input type="file" class="dropify" data-disable-remove="true" />
messages：通过该参数可以修改默认的提示信息。这些信息将会在 tpl 参数中被替换。
$('.dropify').dropify({
messages: {
'default': '点击或拖拽文件到这里',
'replace': '点击或拖拽文件到这里来替换文件',
'remove': '移除文件',
'error': '对不起，你上传的文件太大了'
}}
tpl：该参数用于更新默认的模板。
$('.dropify').dropify({
tpl: {
wrap: '<div class="dropify-wrapper"></div>',
message: '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
preview: '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
filename: '<p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>',
clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
error: '<p class="dropify-error">{{ error }}</p>'
}}
事件
dropify.beforeClear：当点击“remove”按钮时该事件被触发。你可以通过 element.xxxx 来接收 Dropify 对象所有的属性
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.beforeClear', function(event, element){
return confirm("Do you really want to delete \"" + element.filename + "\" ?");
});
dropify.afterClear：当文件上传域被清空后该事件会被触发。你可以通过 element.xxxx 来接收 Dropify 对象所有的属性。
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.afterClear', function(event, element){
alert('File deleted');
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
