Test/src/js/dropify.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

var pluginName = "dropify";

/**
 * Dropify plugin
 * @param {Object} element
 * @param {Array} options
 */
function Dropify(element, options) {
    if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
        return;
    }

    var defaults = {
        defaultFile: '',
        maxFileSize: 0,
        messages: {
            'default': '',
            'replace': '',
            'remove':  '移除',
            'error':   'Sorry, this file is too large'
        },
        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">{{ 移除 }}</button>',
            error:       '<p class="dropify-error">{{ error }}</p>'
        }
    };

    this.element         = element;
    this.input           = $(this.element);
    this.wrapper         = null;
    this.preview         = null;
    this.filenameWrapper = null;
    this.settings        = $.extend(true, defaults, options, this.input.data());
    this.imgFileFormats  = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
    this.file            = null;
    this.filename        = null;
    this.isDisabled      = false;

    this.onChange     = this.onChange.bind(this);
    this.clearElement = this.clearElement.bind(this);

    this.translate();
    this.createElements();
    this.setSize();

    this.input.on('change', this.onChange);
}

/**
 * On change event
 */
Dropify.prototype.onChange = function()
{
    this.resetPreview();
    this.setFilename(this.input.val());
    this.readUrl(this.element);