|
|
function DragImgUpload(id,options) {
|
this.me = $(id);
|
var imgUrl = "../../img/Imgload.png";
|
var defaultOpt = {
|
boxWidth: this.me.width,
|
boxHeight: this.me.height
|
}
|
this.preview = $('<div id="preview"><img src="' + imgUrl +'" class="img-responsive" id="img-responsive" style="width: auto;height: auto; " alt="" title=""> </div>');
|
this.opts=$.extend(true, defaultOpt,{
|
}, options);
|
this.init();
|
this.callback = this.opts.callback;
|
}
|
|
//定义原型方法
|
DragImgUpload.prototype = {
|
init: function () {
|
this.me.append(this.preview);
|
this.me.append(this.fileupload);
|
this.cssInit();
|
this.eventClickInit();
|
},
|
cssInit:function () {
|
this.me.css({
|
'width':this.opts.boxWidth,
|
'height':this.opts.boxHeight,
|
'border':'1px solid #cccccc',
|
'padding':'5px',
|
'cursor': 'pointer',
|
//'display': 'table-cell',
|
//'text-align': 'center',
|
//'vertical-align':'middle'
|
})
|
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;
|
// debugger;
|
var files = fileInput.files;
|
if (files.length = 0) return;
|
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';
|
fileInput.accept = "image/jpg,image/jpeg,image/png,image/bmp";
|
//设置文件name
|
fileInput.name = 'ime-images';
|
//允许上传多个文件
|
fileInput.multiple = true;
|
fileInput.onchange = this.onChangeUploadFile.bind(this);
|
this.fileInput = fileInput;
|
}
|
//触发点击input点击事件，弹出选择文件对话框
|
fileInput.click();
|
}
|
|
|
|
|
}
|
