Dropify使用介绍

简介

Dropify是一个强大的JavaScript插件，它可以帮助开发者实现图像文件和其他文件的上传和预览功能，用户可以通过简单的拖拽操作上传文件，也可以通过点击按钮选择文件进行上传。它易于使用，同时还有可定制的选项，满足开发者的需求。

安装Dropify

<link rel="stylesheet" href="path/to/dropify.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/dropify.min.js"></script>

使用Dropify

<input type="file" class="dropify" data-height="200" />

$(function() {
  $('.dropify').dropify();
});

以上代码片段演示了如何使用dropify，默认情况下，它将初始化所有带有dropify类名的文件输入字段。当该插件加载后，文件输入字段将显示dropify样式，并且拥有更强大的上传功能。

配置选项

如果您不满意dropify的默认配置，可以在初始化时使用选项参数进行自定义配置。以下是一些常用选项：

$(function() {
  $('.dropify').dropify({
    messages: {
        'default': '将文件拖放到这里或点击选择文件',
        'replace': '将文件拖放或点击替换文件',
        'remove':  '移除文件',
        'error':   '对不起，有一些错误发生了'
    },
    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"></div>',
        filename:        '<div class="dropify-filename"><span class="file-icon" /> <span class="dropify-filename-inner"></span></div>',
        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>'
    }
  });
});

以上代码片段自定义了messages和tpl选项。messages选项自定义了插件的输入提示信息，tpl选项定义了插件的HTML元素结构，可以进行自定义的样式控制。

事件回调

Dropify插件还提供了许多有用的回调函数，以便开发者能够在上传和删除文件时执行自己的JavaScript代码，以下是几个事件的示例：

$(function() {
  $('.dropify').dropify({
    messages: {
      'default': '将文件拖放到这里或点击选择文件',
      'replace': '将文件拖放或点击替换文件',
      'remove':  '移除文件',
      'error':   '对不起，有一些错误发生了'
    },
    templates: {
      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"></div>',
      filename:        '<div class="dropify-filename"><span class="file-icon" /> <span class="dropify-filename-inner"></span></div>',
      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>'
    },
    error: {
      'fileSize': '文件大小不能超过{{ value }}。',
      'minWidth': '图片最小宽度必须为{{ value }}。',
      'maxWidth': '图片最大宽度必须为{{ value }}。',
      'minHeight': '图片最小高度必须为{{ value }}。',
      'maxHeight': '图片最大高度必须为{{ value }}。',
      'imageFormat': '只允许上传 {{ value }} 格式的图片。'
    },
    callbacks: {
      onInit: function() {
        console.log('Dropify is initialized.');
      },
      afterInit: function() {
        console.log('Dropify is fully initialized.');
      },
      onUploadError: function(file, message) {
        console.log('Error: ' + message);
      },
      onRemove: function() {
        console.log('File is removed.');
      }
    }
  });
});

以上代码片段演示了如何使用常用的回调函数，比如onInit，在Dropify完全初始化后触发，用于执行初始化完成的JavaScript代码；afterInit触发在所有Dropify组件完全初始化后，用于执行另一个初始化代码段；onUploadError触发在上传失败时显示错误消息；onRemove触发在删除文件时执行JavaScript代码。

结论

Dropify是一个功能强大且易于使用的JavaScript插件，可以大大简化文件上传进程，具有可定制的样式和选项以满足您的需求，您可以使用以上示例来开始使用它。