bui.upload Class

Defined in: src/scripts/mix/web/bui.upload.js:7

Module: Native

单文件上传,支持webapp跟安卓,ios,依赖于fileselect控件, 1.5.1开始,默认使用web上传,切换原生,需要更改needNative参数

预览地址: demo

选择,上传图片,只支持单个文件上传

add: 添加文件
remove: 移除添加的文件
clear: 清除所有添加的文件
data: 获取添加的数据
start: 上传文件
stop: 停止上传
toBase64: 把路径转换成base64位图片地址
widget: 获取依赖的控件

Constructor

`bui.upload`

(

[option]

)

Defined in src/scripts/mix/web/bui.upload.js:7

Parameters:

[option] Object optional
- [url] [ 上传的地址] String optional
- [headers] [ 头部参数, 原生不支持] Object optional
- [data] [ 要上传的对象, data初始化的时候有值会直接上传, 使用 h5 的formdata 上传] Object optional
- [fileKey] [ 默认: file , 后端需要接收这个字段进行保存] String optional
- [timeout] [ 触发timeout的时间默认60000] Number optional
- [mediaType] [ 1.4.7新增, 文件的类型, 原生只支持图片上传,webapp部分机型不支持默认: picture | allmedia | video | audio] String optional
- [from] [ 1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数] String optional
- [showProgress] [ 是否显示进度条默认true] Boolean optional
- [native] [ 1.5.1废弃,由needNative决定 <del>默认true 由bui.isWebapp状态决定 false则强制采用web方式</del>] Boolean optional
- [needNative] [ 1.5.1新增, 是否使用原生上传, 不受bui.isWebapp状态决定默认 false|true 通过这个切换对应的效果,可以通过全局配置 bui.config.upload= {needNative:true}] Boolean optional
- [onProgress] [ 自定义进度条回调,接收百分比值] Function optional
- [onSuccess] [ 成功的回调] Function optional
- [autoClose] [ 1.5新增, 是否允许关闭进度条] Boolean optional
- [onMask] [ 1.5新增, 点击默认进度条的回调,默认停止上传并关闭显示] Function optional
- [onFail] [ 失败的回调] Function optional
- [currentName] [ 1.5.2新增,获取当前选择的文件名称,常用于配合删除] Function optional
- [currentIndex] [ 1.5.2新增,获取当前选择的文件索引,常用于配合删除] Function optional

Example:

js:

       // 1. 初始化 这里如果传url初始化,则url作为公共上传地址,start不再需要传url
                                       var uiUpload = bui.upload({
                                           url: "http://"
                                       });
                                
                                       // 2. 选择文件
                                       uiUpload.add({
                                           onSuccess: function(file){
                                               
                                               // 展示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
                                       })

Index
Methods

Item Index

Methods

`add`

(

[option] [图片质量,默认0.8]
[option.needCompress] [ 1.5.3新增是否需要压缩, 默认 false | true , true 以下的质量及宽度高度参数才会有效.]
[option.quality] [图片质量,默认0.8]
[option.width] [图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]
[option.height] [图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]
[option.mediaType] [ 文件的类型, picture | video | allmedia 原生只支持图片上传]
[option.from] [ 1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数原生: 默认来自 photo(相册) | camera(相机) | savephoto(来自保存的相册)]
[option.destinationType] [ file (返回路径值) | data (返回base64位值)]
[option.onSuccess] [ 成功的回调]
[option.onFail] [ 失败的回调]

)

chainable

Defined in src/scripts/mix/web/bui.upload.js:210

添加文件

Parameters:

[option] [图片质量,默认0.8] Object optional
[option.needCompress] [ 1.5.3新增是否需要压缩, 默认 false | true , true 以下的质量及宽度高度参数才会有效.] Boolean optional
[option.quality] [图片质量,默认0.8] Number optional
[option.width] [图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图] Number optional
[option.height] [图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图] Number optional
[option.mediaType] [ 文件的类型, picture | video | allmedia 原生只支持图片上传] String optional
[option.from] [ 1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数原生: 默认来自 photo(相册) | camera(相机) | savephoto(来自保存的相册)] String optional
[option.destinationType] [ file (返回路径值) | data (返回base64位值)] String optional
[option.onSuccess] [ 成功的回调] Function optional
[option.onFail] [ 失败的回调] Function optional

Example:

       uiUpload.add({
                                                       onSuccess: function(file){
                                                           // console.log(this)
                                                       }
                                                   })

`clear`

() chainable

Defined in src/scripts/mix/web/bui.upload.js:272

清空所有选择的文件

Example:

       uiUpload.clear();

`currentIndex`

()

Defined in src/scripts/mix/web/bui.upload.js:633

Available since 1.5.2

获取最后选择的文件名,删除的时候

Example:

       var currentIndex = uiUpload.currentIndex();

`currentName`

()

Defined in src/scripts/mix/web/bui.upload.js:619

Available since 1.5.2

获取最后选择的文件名,删除的时候

Example:

       var currentName = uiUpload.currentName();

`data`

()

Defined in src/scripts/mix/web/bui.upload.js:309

获取所有选择的文件, 原生默认只返回最后一个选择的文件

Example:

       var data = uiUpload.data();
                                                   // 返回 [{ name: "base64.jpg", data: null, type: "jpg" }]
                                                   // 其中 data为要上传的文件值

`remove`

(

[name] [图片索引|图片名称]

)

chainable

Defined in src/scripts/mix/web/bui.upload.js:242

Available since 1.5.2

删除某个文件,支持索引,图片名称,需要先把 currentIndex,currentName 之类的存在选择后的图片上,供删除调用, 建议拿索引去比对, 因为原生选择的图片默认都命名为 resize.jpg 所以不方便通过名称删除.

Parameters:

[name] [图片索引|图片名称] String optional

Example:

       uiUpload.remove();

`resize`

(

[option] [ 对象]
[option.data] [ 图片的值, 不传则拿最后选择的文件]
[option.quality] [ 图片质量,默认0.8]
[option.width] [图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]
[option.height] [图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]
[option.needCompress] [ 是否需要压缩, 默认: false | true]
[option.destinationType] [ file (返回路径值) | data (返回base64位值) | blob(返回文件流)]
[option.onSuccess] [ 成功的回调]
[option.onFail] [ 失败的回调]

)

chainable

Defined in src/scripts/mix/web/bui.upload.js:177

Available since 1.5.3

修改图片大小

Parameters:

[option] [ 对象] Object optional
[option.data] [ 图片的值, 不传则拿最后选择的文件] Object optional
[option.quality] [ 图片质量,默认0.8] Number optional
[option.width] [图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图] Number optional
[option.height] [图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图] Number optional
[option.needCompress] [ 是否需要压缩, 默认: false | true] Boolean optional
[option.destinationType] [ file (返回路径值) | data (返回base64位值) | blob(返回文件流)] String optional
[option.onSuccess] [ 成功的回调] Function optional
[option.onFail] [ 失败的回调] Function optional

Example:

       uiFileSelect.resize({
                                                       data: uiFileSelect.data(),
                                                       width:100,
                                                       needCompress:true,
                                                       onSuccess: function(file){
                                                           // this 指向uiFileSelect
                                                           // console.log(this)
                                                       }
                                                   })

`start`

(

[option] [参数同初始化一样,在初始化时配置,则是公共的, data不传则获取最后一次选择]
[option.url] [上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传]
[option.headers] [ 附加在headers的参数]
[option.fileKey] [ 默认: file, 上传的图片后端要接收哪个字段]
[option.data] [ 默认不传,会上传最后一张选择的图片, 还可以添加上传的附加参数,如果需要自己指定某一张图片,可以使用 {file: uiUpload.data()}, file为默认的图片字段,需要和fileKey保持一致.]
[option.onSuccess] [ 上传成功的回调]
[option.onFail] [ 上传失败的回调]

)

chainable

Defined in src/scripts/mix/web/bui.upload.js:323

开始上传

Parameters:

[option] [参数同初始化一样,在初始化时配置,则是公共的, data不传则获取最后一次选择] Object optional
[option.url] [上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传] String optional
[option.headers] [ 附加在headers的参数] String optional
[option.fileKey] [ 默认: file, 上传的图片后端要接收哪个字段] String optional
[option.data] [ 默认不传,会上传最后一张选择的图片, 还可以添加上传的附加参数,如果需要自己指定某一张图片,可以使用 {file: uiUpload.data()}, file为默认的图片字段,需要和fileKey保持一致.] Object optional
[option.onSuccess] [ 上传成功的回调] Function optional
[option.onFail] [ 上传失败的回调] Function optional

Example:

       uiUpload.start({
                                                       data: null,
                                                       onSuccess: function (res) {
                                                           // 成功
                                                       },
                                                       onFail: function (res,status) {
                                                           // 失败 status = "timeout" || "error" || "abort", "parsererror"
                                                       }
                                                   })

`startAll`

(

[option] [参数同初始化一样,在初始化时配置,则是公共的]
[option.url] [上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传]
[option.headers] [ 附加在headers的参数]
[option.fileKey] [ 默认: file, 上传的图片后端要接收哪个字段]
[option.data] [ 默认不传,会上传所有图片, 还可以添加上传的附加参数,如果需要自己指定图片,可以使用 {file: uiUpload.data()}, file为默认的图片字段,值是数组,需要和fileKey保持一致.]
[option.needFileinfo] [ 1.5.3新增默认:false | true . 把选择的图片的相关信息一起传给接口, name,size,type]
[option.onSuccess] [ 上传成功的回调]
[option.onFail] [ 上传失败的回调]
[option.onEnd] [ 1.6.2 全部上传成功或失败都会触发]

)

chainable

Defined in src/scripts/mix/web/bui.upload.js:406

批量上传

Parameters:

[option] [参数同初始化一样,在初始化时配置,则是公共的] Object optional
[option.url] [上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传] String optional
[option.headers] [ 附加在headers的参数] String optional
[option.fileKey] [ 默认: file, 上传的图片后端要接收哪个字段] String optional
[option.data] [ 默认不传,会上传所有图片, 还可以添加上传的附加参数,如果需要自己指定图片,可以使用 {file: uiUpload.data()}, file为默认的图片字段,值是数组,需要和fileKey保持一致.] Object optional
[option.needFileinfo] [ 1.5.3新增默认:false | true . 把选择的图片的相关信息一起传给接口, name,size,type] Boolean optional
[option.onSuccess] [ 上传成功的回调] Function optional
[option.onFail] [ 上传失败的回调] Function optional
[option.onEnd] [ 1.6.2 全部上传成功或失败都会触发] Function optional

Example:

       uiUpload.startAll({
                                                       url: "http://",
                                                       onSuccess: function (res) {
                                                           // 成功
                                                       },
                                                       onFail: function (res,status) {
                                                           // 失败 status = "timeout" || "error" || "abort", "parsererror"
                                                       }
                                                   })

`stop`

() chainable

Defined in src/scripts/mix/web/bui.upload.js:501

停止上传

Example:

       uiUpload.stop()

`toBase64`

(

[option] []
[option.data] [ 通过文件选择的返回值,如果不传data,值来自于通过add添加的最后一个文件]
[option.needCompress] [ 1.5.1新增,转换成base64以后需要压缩吗默认 false | true , 为true, mimeType 类型才有效]
[option.mimeType] [ 1.5.1新增,转换的图片类型默认为原图片类型 "image/jpeg" | "image/png"]
[option.onSuccess] [成功的回调]
[option.onFail] [失败的回调]

)

chainable

Defined in src/scripts/mix/web/bui.upload.js:286

把选择的图片文件转换成base64地址,可以直接展示在页面上

Parameters:

[option] [] Object optional
[option.data] [ 通过文件选择的返回值,如果不传data,值来自于通过add添加的最后一个文件] String optional
[option.needCompress] [ 1.5.1新增,转换成base64以后需要压缩吗默认 false | true , 为true, mimeType 类型才有效] Boolean optional
[option.mimeType] [ 1.5.1新增,转换的图片类型默认为原图片类型 "image/jpeg" | "image/png"] String optional
[option.onSuccess] [成功的回调] Function optional
[option.onFail] [失败的回调] Function optional

Example:

       uiUpload.toBase64({
                                                       onSuccess: function (imgurl) {
                                                           $("#id").append('<img src="'+imgurl+'" />')
                                                       }
                                                   });

`widget`

(

[name] [ 依赖控件名 loading]

)

Defined in src/scripts/mix/web/bui.upload.js:647

获取依赖的控件

Parameters:

[name] [ 依赖控件名 loading] String optional

Example:

       //获取依赖控件
                                                   var uiLoading = uiUpload.widget("loading");
                                            
                                                   //使用uiLoading的方法
                                                   uiLoading.start();

BUI

bui.upload Class

单文件上传,支持webapp跟安卓,ios,依赖于fileselect控件, 1.5.1开始,默认使用web上传,切换原生,需要更改needNative参数

预览地址: demo

Constructor

bui.upload

Parameters:

Example:

Item Index

Methods

Methods

add

Parameters:

Example:

clear

Example:

currentIndex

Example:

currentName

Example:

data

Example:

remove

Parameters:

Example:

resize

Parameters:

Example:

start

Parameters:

Example:

startAll

Parameters:

Example:

stop

Example:

toBase64

Parameters:

Example:

widget

Parameters:

Example:

`bui.upload`

`add`

`clear`

`currentIndex`

`currentName`

`data`

`remove`

`resize`

`start`

`startAll`

`stop`

`toBase64`

`widget`