Dropify.js文件拖拽上传插件

Dropify.js文件拖拽上传插件

2024-03-18

1.21W

JeremyFagis

GitHub

使用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>


1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。