upload.js
/**
定义上传控件组件，需要依赖jQuery插件
-
created by dake 2018/10/22
*/
(function ((id);
var defaultOpt = {
boxWidth:'200px',
boxHeight:'200px'
}
this.preview =%3B%20this.opts%3D)
.extend(true, defaultOpt,{
}, options);
this.init();
this.callback = this.opts.callback;
}//定义原型方法
DragImgUpload.prototype = {
constructor: DragImgUpload,
init:function () {
this.me.append(this.preview);
this.cssInit();
this.eventClickInit();
},
cssInit:function () {
this.me.css({
'width':this.opts.boxWidth,
'height':this.opts.boxHeight,
'border':'2px solid #cccccc',
'padding':'10px',
'cursor':'pointer'
})
this.preview.css({
'height':'100%',
'overflow':'hidden'
})}, onDragover:function (e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }, onDrop:function (e) { var self = this; e.stopPropagation(); e.preventDefault(); var fileList = e.dataTransfer.files; //获取文件对象 // do something upload if(fileList.length == 0){ return false; } //检测文件是不是图片 if(fileList[0].type.indexOf('image') === -1){ alert("您拖的不是图片！"); return false; } //拖拉图片到浏览器，可以实现预览功能 var img = window.URL.createObjectURL(fileList[0]); var filename = fileList[0].name; //图片名称 var filesize = Math.floor((fileList[0].size)/1024); if(filesize>500){ alert("上传大小不能超过500K."); return false; } self.me.find("img").attr("src",img); self.me.find("img").attr("title",filename); if(this.callback){ this.callback(fileList); } }, eventClickInit:function () { var self = this; this.me.unbind().click(function () { self.createImageUploadDialog(); }) var dp = this.me[0]; dp.addEventListener('dragover', function(e) { self.onDragover(e); }); dp.addEventListener("drop", function(e) { self.onDrop(e); }); }, onChangeUploadFile:function () { var fileInput = this.fileInput; var files = fileInput.files; var file = files[0]; var img = window.URL.createObjectURL(file); var filename = file.name; this.me.find("img").attr("src",img); this.me.find("img").attr("title",filename); if(this.callback){ this.callback(files); } }, createImageUploadDialog:function () { var fileInput = this.fileInput; if (!fileInput) { //创建临时input元素 fileInput = document.createElement('input'); //设置input type为文件类型 fileInput.type = 'file'; //设置文件name fileInput.name = 'ime-images'; //允许上传多个文件 fileInput.multiple = true; fileInput.onchange = this.onChangeUploadFile.bind(this); this.fileInput = fileInput; } //触发点击input点击事件，弹出选择文件对话框 fileInput.click(); }}
//初始化组件方法
this =
this.data('dragImgupload'),
options = typeof option === 'object' && option;
if (!data) {
.fn.dragImgUpload.Constructor = DragImgUpload;
})(window.jQuery);
2.初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
</style>
<script src="jquery.js"></script>
<script src="upload.js"></script>
<body>
<div id="drop_area" class="aaa"></div>
</body>
<script type="text/javascript">
var dragImgUpload =$("#drop_area").dragImgUpload({
callback:function (files) {
//回调函数，可以传递给后台等等
var file = files[0];
console.log(file.name);
}
})
console.log(dragImgUpload);
</script>
</html>
