一个值得借鉴的插件写法
来源:互联网 发布:淘宝助理5.5官方下载 编辑:程序博客网 时间:2024/05/16 14:38
/* Date: 2016/10/25 Author: hishion Email: 506713930@qq.com Description: html5 文件上传小插件, 支持简单验证*/(function(){ var Uploadify = function (){ return this.init.apply(this, arguments); }; Uploadify.prototype ={ /* 两个参数时: form对象 与 config对象 一个参数时: config对象 */ init: function(){ //传入的是form 与 config if(arguments[0].tagName && arguments[0].nodeType === 1){ this.element = arguments[0]; this.setConfig(arguments[1] || {}); }else{ //传入config this.setConfig(arguments[0]); } this.file = this.options['file'] || this.element && this.element.querySelector('input[type=file]'); this.url = this.options['url'] || this.element && this.element.action; this.max = this.options['maximum']; this.size = this.options['size']; this.type = this.options['type']; this.cache = {}; if(!this.file){ throw new Error("file does not exist!"); }else if(!this.url){ throw new Error("url cannot be empty!"); }else if(typeof FileReader === 'undefined'){ throw new Error('browser does not support FileReader!'); } if(this.max > 1 && this.options.isMultiple){ this.file.setAttribute('multiple', true); }else{ this.file.removeAttribute('multiple'); } this.bindEvent(); }, /* 检验合法性, return null 表示无错, 否则 return 错误信息. */ verify: function(file){ var msg = this.options.message; var reg = new RegExp('\\b' + this.type + '\\b'); if(file.size > this.size){ return msg['size']; }else if(reg.test(file.type) === false){ return msg['type']; }else if(!this.options.isAllowSame && this.cache[file.lastModifiedDate-0] === 1){ return msg['same']; }else{ this.cache[file.lastModifiedDate-0] = 1; return null; } }, /* 获得上传的个数 */ getUploadNum: function(){ var attr, count = 0; for(attr in this.cache){ if(this.cache[attr]){ count++; } } return count; }, /* 开始上传文件,并验证 */ bindEvent: function(){ var self = this, opt = self.options, msg = opt.message, cb = ['abort', 'loadstart', 'progress', 'loadend']; function uploadstart(){ var files = this.files; if(files.length > self.max || self.getUploadNum() >= self.max){ opt['error'](files, msg['maximum']); }else{ for(var k = 0; k < files.length; k++){ var ret = files[k], err = self.verify(ret), reader = new FileReader(); if(err){ opt['error'](ret, err); }else{ switch(opt['rendAsType'].toLowerCase()){ case 'string': reader.readAsBinaryString(files[k]);break; case 'text': reader.readAsText(files[k]);break; default: reader.readAsDataURL(files[k]); } } for(var i = 0; i < cb.length; i++){ reader.addEventListener(cb[i], opt[cb[i]], false); } (function(ret){ reader.addEventListener('error', function(e){ opt['error'](ret, err || msg['other']); }, false); reader.addEventListener('load', function(e){ self.ajaxUpload(ret); opt['load']( e, ret); }) }(ret)); } } } if(opt.dropElement){ self.bindDropEvent(uploadstart); } self.on(self.file, 'change', function(){ uploadstart.call(this); if(self.options.isAllowSame){ this.dataValue = this.value; this.value = ''; } }); }, /*绑定拖拽上传事件*/ bindDropEvent: function(uploadstart){ var opt = this.options; this.on(document, 'dragenter', opt.dragenter); this.on(document, 'dragleave', opt.dragleave); this.on(opt.dropElement, 'dragover', function(e){ e.preventDefault(); opt.dragover.call(this, e); }); this.on(opt.dropElement, 'drop', function(e){ e.preventDefault(); e.stopPropagation(); uploadstart.call(e.dataTransfer); opt.drop.call(this, e); }); }, /*ajax 上传*/ ajaxUpload: function(file){ var self = this; var xhr = new XMLHttpRequest(); var xhrData = self.element ? new FormData(self.element) : new FormData(); xhr.lastModified = file.lastModified; xhr.onreadystatechange = function(){ var response = this.responseText; if(this.readyState == 4){ if(this.status < 300 && this.status >= 200){ self.options.uploadSuccess.call(this, response); }else{ self.cache[this.lastModified] = null; self.options.uploadFailed.call(this); } } if(!this.once){ this.once = true; self.options.uploadComplete(); } }; xhrData.append(self.options.uploadName || self.file.name, file); xhr.open("POST", self.url, true); xhr.send(xhrData); }, on: function(obj, event, callback){ return obj.addEventListener(event, callback, false); }, setConfig: function(config){ var options = { //input file控件对象 file: '', //上传类型 type: 'image', //上传最多个数 maximum: 5, //文件大小 2M size: 1024*1024*2, //html5中reader对象解析类型 可选 [string | text | url] rendAsType: 'url', //上传时后端 接收的 name uploadName: '', //上传地址 url: '', //错误提示信息! message: { type: '类型不对!', size: '文件太大', maximum: '上传文件数量太多!', same: '不能上传相同的文件!', other: '其它网络错误!' }, //是否多选 isMultiple: true, //是否允许提交重复的文件 isAllowSame: false, //文件拖拽上传区域对象 null表示不支持 dropElement: null, //文件拖拽dragenter事件回调 dragenter: function(){}, //文件拖拽dragleave事件回调 dragleave: function(){}, //文件拖拽dragover事件回调 dragover: function(){}, //文件拖拽drop事件回调 drop: function(){}, //ajax上传成功 回调 uploadSuccess: function(){}, //ajax上传失败 回调 uploadFailed: function(){}, //ajax上传完成 uploadComplete: function(){} }, attr, /*数组中 各种回调 */ cb = ['abort', 'error', 'loadstart', 'progress', 'load', 'loadend']; for(var i = 0, len = cb.length; i < len; i++){ options[cb[i]] = function(){}; } for(attr in config){ if(options.hasOwnProperty(attr)){ options[attr] = config[attr]; } }; this.options = options; } }; window.mbUploadify = Uploadify;}());
阅读全文
0 0
- 一个值得借鉴的插件写法
- 一个值得借鉴的QSS样式
- 一个值得借鉴的QSS样式
- 一个值得借鉴的QSS样式
- 值得借鉴的文章
- 值得借鉴的makefile
- 经典sql语句写法,值得借鉴
- 一个浙江商人立下的22条规矩(值得借鉴)
- 一个“玩”数据前辈的职业规划,值得学习和借鉴
- 一个同学的ajax学习经验,值得借鉴
- 股市值得借鉴的事例
- [转]值得借鉴的工作经验
- 值得借鉴的oracle 项目
- 挺好的,值得学习借鉴
- 挺好的格言,值得借鉴
- 可以借鉴的js写法
- 一个浙江商人立下的22条规矩 (太值得借鉴了)
- 一个浙江商人立下的22条规矩 (太值得借鉴了)
- GitHub使用教程(一)
- 立方尾不变
- 基础算法学习第二天(冒泡排序、选择排序、直接插入排序)
- 邻接链表实现的无向图
- css样式来源于层叠规则
- 一个值得借鉴的插件写法
- TensorFlow入门(九)使用 tf.train.Saver()保存模型
- 如何利用PHPExcel实现数据导出成excel文件
- sklearn中的交叉验证和数据划分
- null id in entry (don't flush the Session after an exception occurs)的错误
- 实验楼课程列表
- 使用maven,当jar包冲突时如何解决
- orcle,mysql 更新备注 某字段数据追加函数
- 客服聊天系统,WeLive客服聊天系统,免费,开源,源码