bui.upload Class
单文件上传,支持webapp跟安卓,ios,依赖于fileselect控件, 1.5.1开始,默认使用web上传,切换原生,需要更改needNative参数
预览地址: demo
选择,上传图片,只支持单个文件上传
add: 添加文件remove: 移除添加的文件
clear: 清除所有添加的文件
data: 获取添加的数据
start: 上传文件
stop: 停止上传
toBase64: 把路径转换成base64位图片地址
widget: 获取依赖的控件
Constructor
bui.upload
-
[option]
Parameters:
-
[option]Object optional-
[url]String optional[ 上传的地址 ]
-
[headers]Object optional[ 头部参数, 原生不支持 ]
-
[data]Object optional[ 要上传的对象, data初始化的时候有值会直接上传, 使用 h5 的formdata 上传 ]
-
[fileKey]String optional[ 默认: file , 后端需要接收这个字段进行保存 ]
-
[timeout]Number optional[ 触发timeout的时间默认60000 ]
-
[mediaType]String optional[ 1.4.7新增, 文件的类型, 原生只支持图片上传,webapp部分机型不支持 默认: picture | allmedia | video | audio ]
-
[from]String optional[ 1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数 ]
-
[showProgress]Boolean optional[ 是否显示进度条 默认true ]
-
[native]Boolean optional[ 1.5.1废弃,由needNative决定
默认true 由bui.isWebapp状态决定 false则强制采用web方式] -
[needNative]Boolean optional[ 1.5.1新增, 是否使用原生上传, 不受bui.isWebapp状态决定 默认 false|true 通过这个切换对应的效果,可以通过全局配置 bui.config.upload = {needNative:true} ]
-
[onProgress]Function optional[ 自定义进度条回调,接收百分比值 ]
-
[onSuccess]Function optional[ 成功的回调 ]
-
[autoClose]Boolean optional[ 1.5新增, 是否允许关闭进度条 ]
-
[onMask]Function optional[ 1.5新增, 点击默认进度条的回调,默认停止上传并关闭显示 ]
-
[onFail]Function optional[ 失败的回调 ]
-
[currentName]Function optional[ 1.5.2新增,获取当前选择的文件名称,常用于配合删除 ]
-
[currentIndex]Function optional[ 1.5.2新增,获取当前选择的文件索引,常用于配合删除 ]
-
Example:
js:
// 1. 初始化 这里如果传url初始化,则url作为公共上传地址,start不再需要传url
var uiUpload = bui.upload({
url: "http://"
});
// 2. 选择文件
uiUpload.add({
onSuccess: function(file){
// 展示本地图片
var url = window.URL.createObjectURL(files[0]);
document.querySelector('img').src = window.URL.createObjectURL(url);
// 展示base64本地图片
// this.toBase64({
// onSuccess: function (url) {
// document.querySelector('img').src = url;
// }
// });
// 3. 上传文件 选择以后直接上传到服务器
// uiUpload.start({
// onSuccess:function(data){
// // 成功
// },
// onFail: function(res,status){
// // 失败 status = "timeout" || "error" || "abort", "parsererror"
// }
// });
}
})
// 3. 也可以选择后再单独上传
uiUpload.start({
data: null
})Item Index
Methods
add
-
[option]
添加文件, 参数的配置全部针对原生选择
Parameters:
-
[option]Object optional[图片质量,默认40]
-
[quality]Number optional[图片质量,默认40]
-
[width]Number optional[图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]
-
[height]Number optional[图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]
-
[mediaType]String optional[ 文件的类型, picture | video | allmedia 原生只支持图片上传 ]
-
[from]String optional[ 1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数 原生: 默认来自 photo(相册) | camera(相机) | savephoto(来自保存的相册) ]
-
[destinationType]String optional[ file (返回路径值) | data (返回base64位值) ]
-
[onSuccess]Function optional[ 成功的回调 ]
-
[onFail]Function optional[ 失败的回调 ]
-
Example:
uiUpload.add({
onSuccess: function(file){
// console.log(this)
}
})clear
()
chainable
清空所有选择的文件
Example:
uiUpload.clear();currentIndex
()
获取最后选择的文件名,删除的时候
Example:
var currentIndex = uiUpload.currentIndex();currentName
()
获取最后选择的文件名,删除的时候
Example:
var currentName = uiUpload.currentName();data
()
获取所有选择的文件, 原生默认只返回最后一个选择的文件
Example:
var data = uiUpload.data();
// 返回 [{ name: "base64.jpg", data: null, type: "jpg" }]
// 其中 data为要上传的文件值remove
-
[name]
删除某个文件,支持索引,图片名称,需要先把 currentIndex,currentName 之类的存在选择后的图片上,供删除调用, 建议拿索引去比对, 因为原生选择的图片默认都命名为 resize.jpg 所以不方便通过名称删除.
Parameters:
-
[name]String optional[图片索引|图片名称]
Example:
uiUpload.remove();start
-
[option]
开始上传
Parameters:
-
[option]Object optional[参数同初始化一样,在初始化时配置,则是公共的, data不传则获取最后一次选择]
Example:
uiUpload.start({
data: null,
onSuccess: function (res) {
// 成功
},
onFail: function (res,status) {
// 失败 status = "timeout" || "error" || "abort", "parsererror"
}
})startAll
-
[option]
批量上传
Parameters:
-
[option]Object optional[参数同初始化一样,在初始化时配置,则是公共的, data不传则获取最后一次选择]
Example:
uiUpload.startAll({
url: "http://",
onSuccess: function (res) {
// 成功
},
onFail: function (res,status) {
// 失败 status = "timeout" || "error" || "abort", "parsererror"
}
})stop
()
chainable
停止上传
Example:
uiUpload.stop()toBase64
-
[option]
把选择的图片文件转换成base64地址,可以直接展示在页面上
Parameters:
-
[option]Object optional[]
-
[data]String optional[ 通过文件选择的返回值,如果不传data,值来自于通过add添加的最后一个文件 ]
-
[needCompress]Boolean optional[ 1.5.1新增,转换成base64以后需要压缩吗 默认 false | true , 为true, mimeType 类型才有效 ]
-
[mimeType]String optional[ 1.5.1新增,转换的图片类型 默认为原图片类型 "image/jpeg" | "image/png"]
-
[onSuccess]Function optional[成功的回调]
-
[onFail]Function optional[失败的回调]
-
Example:
uiUpload.toBase64({
onSuccess: function (imgurl) {
$("#id").append('<img src="'+imgurl+'" />')
}
});widget
-
[name]
获取依赖的控件
Parameters:
-
[name]String optional[ 依赖控件名 loading ]
Example:
//获取依赖控件
var uiLoading = uiUpload.widget("loading");
//使用uiLoading的方法
uiLoading.start();