Dropify.js文件拖拽上传插件

使用HTML5的文件API，可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器。dropify.js正是一款可以拖拽文件到指定区域进行文件上传的jQuery表单文件上传插件。前提是浏览器得支持HTML5噢...

 

默认版本

  1. JS
$('.dropify').dropify();
<input type="file" class="dropify" data-default-file="" />

 

带默认图片

  1. JS
$('.dropify').dropify();
<input type="file" class="dropify" data-default-file="images/test-image-1.jpg" />

 

禁止上传状态

  1. JS
$('.dropify').dropify();
<input type="file" class="dropify" disabled="disabled" />

 

设置上传区域的高度

  1. JS
$('.dropify').dropify();
<input type="file" class="dropify" data-height="300" />

 

限制最大上传文件大小

  1. JS
$('.dropify').dropify();
<input type="file" class="dropify" data-max-file-size="100K" />

 

定义一些返回事件

  1. JS
var drEvent = $('.dropify-event').dropify();

drEvent.on('dropify.beforeClear', function(event, element){
 return confirm("Do you really want to delete \"" + element.filename + "\" ?");
});

drEvent.on('dropify.afterClear', function(event, element){
 alert('File deleted');
});
<input type="file" class="dropify-event" data-default-file="images/test-image-1.jpg" />