html5移动端上传图片控件,GitHub - suncompy/mbUploadify: html5移动端文件、图片上传插件...

#mbUploadify.js

##html5移动端文件上传插件, 无依赖, 轻小

Written by: hishion

##使用一

####Step 1: 引入资源文件

####Step 2: 调用 mbUploadify

var upload = new mbUploadify({

file: document.getElementById('j-file'),

/*ajax 上传地址*/

url: 'mbUploadify.php',

/*ajax上传成功*/

uploadSuccess: function(res){

console.log(res);

},

......

})

##使用二

####Step 1: 引入资源文件

拖拽文件上传

####Step 2: 调用 mbUploadify

var upload2 = new mbUploadify(document.querySelector('form'), {

/*文件拖拽上传区域对象 null表示不支持拖拽上传*/

dropElement: document.getElementById('j-dropArea'),

......

});

##配置项

构造函数 mbUploadify 的参数个数可选, 其中第二个参数配置项列表如下. 当只有一个form对象作参数时，系统会从form对象里面查找file, url, uploadName配置项.

var upload = new mbUploadify(form, {

//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(){},

//上传中止

abort: function(){},

//上传失败

error: function(file, msg){},

//上传开始

loadstart: function(){},

//上传进度

progress: function(){},

//上传成功

load: function(){},

//上传完成，不管成功失败

loadend: function(){},

//ajax上传成功

uploadSuccess: function(){},

//ajax上传失败

uploadFailed: function(){},

//ajax上传完成

uploadComplete: function(){}

});