Dropify.js文件拖拽上传插件

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

然后通过 HTML5 中提供了一个 FormData 对象 API可以方便地构造一个表单请求，并通过 XMLHttpRequest来发送。通过 FormData 对象发送文件也是可以的，如此则无刷新上传就变的非常简单了。

插件安装

引入dropify.js和dropify.css以及dist/fonts目录下的所有文件，别忘了jQuery

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

使用方法

$('.dropify').dropify();

绑定事件

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

参数说明

• defaultFile：input元素中是否有默认的文件。可以在初始化插件使配置该参数，或直接在DOM元素上标注data-default-file="url_of_your_file"（建议这样做）。
• height：可拖拽文件上传区域的高度。或在DOM元素中设置data-height="300"
• maxFileSize：设置上传文件大小的最大值。如果上传的文件大小大于这个值，将会弹出一个错误对话框。你可以使用K，M或G为单位。或在DOM元素中设置data-max-file-size="500K"
• disabled：禁用文件上传控件。或在DOM元素中设置disabled="disabled"
• disableRemove：禁用remove按钮。或在DOM元素中设置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对象所有的属性。
• dropify.afterClear：当文件上传域被清空后该事件会被触发。你可以通过element.xxxx来接收Dropify对象所有的属性。

附：无刷新上传完整前端代码

HTML代码

<form id="form">
	<input type="file" name="file" id="file" />
	<input type="submit" name="do" id="do" value="submit" />
</form>

Js代码(引用jQuery框架)

<script>$("form").submit(function(e){
	e.preventDefault();

	//先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段
	var fd = new FormData();
	fd.append('sitename', '优码网');
	fd.append('url', 'http://www.hoohtml.com');
	fd.append('file', document.getElementById('file');
	//fd.append('file', $(':file')[0].files[0]); //jQuery 方式

	//使用jQuery 发送请求
	$.ajax({
		url: '/test_upload.php',
		type: 'POST',
		data: fd,
		contentType:false,  //必须false才会自动加上正确的Content-Type
		processData:false //必须false才会避开jQuery对 formdata 的默认处理
	}).done(function(result){
		console.log(result);
	}).fail(function(err){
		console.log(err);
	});

	//通过表单对象创建 FormData
	//var fd = new FormData(document.getElementById("form"));
	//var fd = new FormData($("form:eq(0)")[0]); //jquery 方式

	//XMLHttpRequest 原生方式发送请求
	/*
	var xhr = new XMLHttpRequest();       
	xhr.open("POST" ,"/test_upload.php" , true);
	xhr.send(fd);
	xhr.onload = function(e) {
		if (this.status == 200) {
			alert(this.responseText);
		};
	};
	*/

});
</script>