BUI

其它版本:

API for BUI 1.5.1

Show:

bui.fileselect Class

选择文件

预览地址: demo

选择文件

add: 添加文件
remove: 移除添加的文件
clear: 清除所有添加的文件
data: 获取添加的数据
value: 获取上传的文件值
toBase64: 把获取到的本地图片转换成base64位

Constructor

bui.fileselect

(
  • option
)

Parameters:

  • option Object
    • [quality] Boolean optional

      [ 图片的质量, 默认 0.8 ]

    • [width] Boolean optional

      [ 图片的宽度, 默认 800, 原生是在上传前压缩成800宽度,web是在显示的时候显示为800宽度,需要后台自己压缩 ]

    • [mediaType] String optional

      [ 文件的类型, picture | video | allmedia 原生只支持图片上传 ]

    • [from] String optional

      [ 1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数 ]

    • [needNative] Boolean optional

      [ 1.5.1新增, 是否使用原生上传, 不受bui.isWebapp状态决定 默认 false|true 通过这个切换对应的效果,可以通过全局配置 bui.config.fileselect = {needNative:true} ]

Example:

js:

       // 1. 初始化, 这里如果有 onSuccess,onFail 则为公共处理方法,添加只需要 uiFileSelect.add();
       var uiFileSelect = bui.fileselect();  

       // 2. 调用 添加文件方法
       uiFileSelect.add({
           onSuccess: function(files){
               // 展示本地图片,部分手机不支持
               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;

               //     }
               // });
           },
           onFail: null
       })

Item Index

Methods

add

(
  • [option]
)
chainable

添加文件, 参数的配置全部针对原生选择

Parameters:

  • [option] Object optional

    [对象]

    • [quality] Number optional

      [图片质量,默认0.8]

    • [width] Number optional

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

    • [height] Number optional

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

    • [mediaType] String optional

      [ 文件的类型, 原生只支持图片上传 picture | video | allmedia ]

    • [from] String optional

      [ 图片来源, 默认来自 "picture"(相册) | camera(相机) ]

    • [destinationType] String optional

      [ file (返回路径值) | data (返回base64位值) ]

    • [onSuccess] Function optional

      [ 成功的回调 ]

    • [onFail] Function optional

      [ 失败的回调 ]

Example:

       uiFileSelect.add({
           onSuccess: function(file){
               // this 指向uiFileSelect
               // console.log(this)
           }
       })

clear

()

清空所有选择的文件

Example:

       uiFileSelect.clear();

data

()

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

Example:

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

remove

(
  • name
  • [key]
)
chainable

删除选择的文件, 安卓选择后的文件名自动更改为 resize.jpg

Parameters:

  • name String

    [ 要删除的图片名字带后缀名 ]

  • [key] String optional

    [ 图片名字在哪个字段, 默认是 "name"]

Example:

       uiFileSelect.remove("resize.jpg");

toBase64

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    []

    • [data] String optional

      [ 通过文件选择的文件进行转码 ]

    • [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:

       // 展示本地图片
       uiFileSelect.toBase64({
           onSuccess: function (imgurl) {
               $("#id").append('<img src="'+imgurl+'" />')
           }
       });

value

()

获取最后选择的文件

Example:

       var value = uiFileSelect.value();
       // 返回值 value为要上传的文件值, web上传跟原生上传得到的值不一样