图片拖拽和预览插件dropify

本文详细介绍了Dropify文件上传插件的基本用法及高级配置,包括如何设置默认文件、文件大小限制、尺寸限制等,同时提供了自定义消息、错误处理及事件监听的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

插件dropify
基本实例:
基本一步就可应用,其余的样式自己再进行微调。

$('.dropify').dropify({
    messages: {
        'default': '点击或拖拽文件到这里',
        'replace': '点击或拖拽文件到这里来替换文件',
        'remove':  '移除文件',
        'error':   '对不起,你上传的文件太大了',
    }
});

defaultFile: 如果有默认文件可使用它。可以在使用插件时初始化此选项,或直接在DOM元素中使用data-default-file=”url_of_your_file”(推荐)。

<input type="file" class="dropify" data-default-file="url_of_your_file" />

height: dropify元素高度。或如下例子设置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" />
//maxFileSizePreview: 设置预览文件大小的最大值(假设为图片)。如果文件大小超出此值,那么只有文件图标而不显示预览图。单位有K, M 和 G。
<input type="file" class="dropify" data-max-file-size-preview="3M" />
//messages: 此选项能让你设置自定义信息,并仅能用数组设置并初始化。该信息会被tpl选项替换。
$('.dropify').dropify({
    messages: {'default': 'Drag and drop a file here or click','replace': 'Drag and drop or click to replace','remove':  'Remove','error':   'Ooops, something wrong appended.'}
}
//error: 此项能代替默认的错误信息,仅能用数组方式初始化。 {{ value }}  为代替的选项值文本标记。
$('.dropify').dropify({
    error: {'fileSize': 'The file size is too big ({{ value }} max).','minWidth': 'The image width is too small ({{ value }}}px min).','maxWidth': 'The image width is too big ({{ value }}}px max).','minHeight': 'The image height is too small ({{ value }}}px min).','maxHeight': 'The image height is too big ({{ value }}px max).','imageFormat': 'The image format is not allowed ({{ value }} only).'}
}
//tpl: 用于更新默认的模板,仅在初始化时用数组方式设置。
$('.dropify').dropify({
    tpl: {
        wrap:            '<div class="dropify-wrapper"></div>',
        loader:          '<div class="dropify-loader"></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>',
        errorLine:       '<p class="dropify-error">{{ error }}</p>',
        errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'}
}

minWidth: 设置最小宽度。超出此选项会显示错误信息

<input type="file" class="dropify" data-min-width="400" />

maxWidth: 设置最大宽度。超出此选项会显示错误信息

<input type="file" class="dropify" data-max-width="1000" />
<input type="file" class="dropify" data-min-height="400" />
//minHeight: 设置最小高度。超出此选项会显示错误信息
//maxHeight: 设置最大高度。超出此选项会显示错误信息
<input type="file" class="dropify" data-max-height="1000" />
//disabled: 使控件失效。
<input type="file" class="dropify" disabled="disabled" />
//showRemove: 显示移除按钮。默认为true.
<input type="file" class="dropify" data-show-remove="false" />
//showLoader: 显示加载器。默认: true.
<input type="file" class="dropify" data-show-loader="false" />
//showErrors: 是否显示错误信息,默认: true.
<input type="file" class="dropify" data-show-errors="true" />
//errorsPosition: 错误信息显示位置,有两选项:overlay or outside。默认: overlay.
<input type="file" class="dropify" data-errors-position="outside" />
//allowedFormats: 设置允许通过或拒绝的图片格式。如添加属性 data-allowed-formats="portrait square"只允许portrait和square图上传。默认值:
['portrait', 'square', 'landscape'].
<input type="file" class="dropify" data-allowed-formats="portrait square" />
//allowedFileExtensions: 允许文件扩展名。例如添加属性 data-allowed-file-extensions="pdf png psd" 将允许PDF, PNG 和 PSD 文件上传默认值所有扩展名都允许: ['*'].
<input type="file" class="dropify" data-allowed-file-extensions="pdf png psd" />

事件

//dropify.beforeClear: 该事件在点击“移除”按钮时呼叫,并在清理预览图之前。你能使用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');
});
//dropify.errors: 当一个或多个错误在进程当中出现时该事件被呼叫。
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.errors',
function(event, element) {
    alert('Has Errors!');
});
//dropify.error.xxxxx: 另外dropify.errors可以根据具体错误事件来执行各自的逻辑。
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.error.fileSize',
function(event, element) {
    alert('Filesize error message!');
});
drEvent.on('dropify.error.minWidth',
function(event, element) {
    alert('Min width error message!');
});
drEvent.on('dropify.error.maxWidth',
function(event, element) {
    alert('Max width error message!');
});
drEvent.on('dropify.error.minHeight',
function(event, element) {
    alert('Min height error message!');
});
drEvent.on('dropify.error.maxHeight',
function(event, element) {
    alert('Max height error message!');
});
drEvent.on('dropify.error.imageFormat',
function(event, element) {
    alert('Image format error message!');
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值