可拖拽文件的jQuery文件上传控件美化插件

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');
  });