BUI

其它版本:

API for BUI 1.5.4

Show:

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
       })

Methods

add

(
  • [option]
)
chainable

添加文件

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]
)
chainable

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

Parameters:

  • [name] String optional

    [图片索引|图片名称]

Example:

       uiUpload.remove();

resize

(
  • [option]
)
chainable

修改图片大小

Parameters:

  • [option] Object optional

    [ 对象 ]

    • [data] Object optional

      [ 图片的值, 不传则拿最后选择的文件 ]

    • [quality] Number optional

      [ 图片质量,默认0.8 ]

    • [width] Number optional

      [图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]

    • [height] Number optional

      [图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图]

    • [needCompress] Boolean optional

      [ 是否需要压缩, 默认: false | true ]

    • [destinationType] String optional

      [ file (返回路径值) | data (返回base64位值) | blob(返回文件流) ]

    • [onSuccess] Function optional

      [ 成功的回调 ]

    • [onFail] Function optional

      [ 失败的回调 ]

Example:

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

start

(
  • [option]
)
chainable

开始上传

Parameters:

  • [option] Object optional

    [参数同初始化一样,在初始化时配置,则是公共的, data不传则获取最后一次选择]

    • [url] String optional

      [上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传]

    • [headers] String optional

      [ 附加在headers的参数 ]

    • [fileKey] String optional

      [ 默认: file, 上传的图片后端要接收哪个字段 ]

    • [data] Object optional

      [ 默认不传,会上传最后一张选择的图片, 还可以添加上传的附加参数,如果需要自己指定某一张图片,可以使用 {file: uiUpload.data()}, file为默认的图片字段,需要和fileKey保持一致. ]

    • [onSuccess] Function optional

      [ 上传成功的回调 ]

    • [onFail] Function optional

      [ 上传失败的回调 ]

Example:

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

startAll

(
  • [option]
)
chainable

批量上传

Parameters:

  • [option] Object optional

    [参数同初始化一样,在初始化时配置,则是公共的]

    • [url] String optional

      [上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传]

    • [headers] String optional

      [ 附加在headers的参数 ]

    • [fileKey] String optional

      [ 默认: file, 上传的图片后端要接收哪个字段 ]

    • [data] Object optional

      [ 默认不传,会上传所有图片, 还可以添加上传的附加参数,如果需要自己指定图片,可以使用 {file: uiUpload.data()}, file为默认的图片字段,值是数组,需要和fileKey保持一致. ]

    • [needFileinfo] Boolean optional

      [ 1.5.3新增 默认:false | true . 把选择的图片的相关信息一起传给接口, name,size,type ]

    • [onSuccess] Function optional

      [ 上传成功的回调 ]

    • [onFail] Function optional

      [ 上传失败的回调 ]

Example:

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

stop

() chainable

停止上传

Example:

       uiUpload.stop()

toBase64

(
  • [option]
)
chainable

把选择的图片文件转换成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();