#mbUploadify.js ##html5移动端文件上传插件, 无依赖, 轻小
在线演示：http://www.byex.cn/mbUploadify
Written by: hishion
##使用一
####Step 1: 引入资源文件
<input type="file" name="files" id="j-file" multiple>
<!-- mbUploadify Javascript file -->
<script src="mbUploadify.min.js"></script>####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: 引入资源文件
<form action="mbUploadify.php" method="post">
<label for="j-file2" class="mbUploadify" id="j-dropArea">
拖拽文件上传
<input type="file" name="files" id="j-file2" multiple>
</label>
<!-- 附带提交其它数据 -->
<input type="hidden" name="email" value="[email protected]">
</form>
<!-- mbUploadify Javascript file -->
<script src="mbUploadify.min.js"></script>####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(){}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent