Show:

bui.upload Class

单文件上传,支持webapp跟安卓,ios,依赖于fileselect控件, 1.5.1开始,默认使用web上传,切换原生,需要更改needNative参数 注意: BUI 1.7开始将废弃掉该原生接口, 请使用对应的原生平台抛出的方法使用

预览地址: demo

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

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

Constructor

bui.upload

(
  • [option]
)

Parameters:

  • [option] Object optional
    • [url] String optional

      上传的地址

    • [headers] Object optional

      头部参数, 原生不支持

    • [method] Object optional

      默认: "POST",

    • [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 | application/zip

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

html:

   <div id="buiPhoto" class="bui-upload bui-fluid-space-4">
                                           <div class="span1">
                                               <div id="btnUpload" class="bui-btn">
                                                   <i class="icon-plus large"></i>
                                               </div>
                                           </div>
                                       </div>
                                    

js:

       // 1. 初始化 这里如果传url初始化,则url作为公共上传地址,start不再需要传url
                                           var uiUpload = bui.upload({
                                               url: "http://"
                                           });
                                    
                                           // 2. 选择文件
                                    
                                           $("#btnUpload").click(function(){
                                               uiUpload.add({
                                                   onSuccess: function(file){
                                                       
                                                       // 3. 上传文件 选择以后直接上传到服务器
                                                        uiUpload.start({
                                                            data: {
                                                                file: file
                                                             },
                                                            onSuccess:function(res){
                                                                // 展示返回的图片
                                                               $("#buiPhoto").append(&lt;div class=&quot;span1&quot;&gt;&lt;img src=&quot;${res.url}&quot; /&gt;&lt;/div&gt;)
                                                            },
                                                            onFail: function(res,status){
                                                                // 失败 status = "timeout" || "error" || "abort", "parsererror"
                                                            }
                                                        });
                                                   }
                                               })
                                           })
                                           
                                       // 1.8.6 新增批量选择上传
                                    
                                       $("#btnUpload").click(function(){
                                               uiUpload.addMore({
                                                   onSuccess: function(file){
                                                       
                                                       // 3. 上传文件 选择以后直接上传到服务器
                                                        uiUpload.start({
                                                            data: {
                                                                file: uiUpload.data()
                                                             },
                                                            onSuccess:function(res){
                                                                // 展示返回的图片
                                                               $("#buiPhoto").append(&lt;div class=&quot;span1&quot;&gt;&lt;img src=&quot;${res.url}&quot; /&gt;&lt;/div&gt;)
                                                            },
                                                            onFail: function(res,status){
                                                                // 失败 status = "timeout" || "error" || "abort", "parsererror"
                                                            }
                                                        });
                                                   }
                                               })
                                           })
                                    

Methods

add

(
  • [option]
)
chainable

添加文件

Parameters:

  • [option] Object optional

    图片质量,默认0.8

    • [needCompress] Boolean optional

      1.5.3新增 是否需要压缩, 默认 false | true , true 以下的质量及宽度高度参数才会有效.

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

      1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数 原生: 默认来自 photo(相册) | camera(相机) | savephoto(来自保存的相册)

    • [destinationType] String optional

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

    • [onChange] Function optional

      改变时触发

    • [onSuccess] Function optional

      成功的回调

    • [onFail] Function optional

      失败的回调

Example:

       uiUpload.add({
                                                           onChange: function(e){
                                                               if( e.target.files.length > 1){
                                                                   bui.hint("一次只能选择一张图片")
                                                                   // 不执行onSuccess
                                                                   return false;
                                                               }
                                                           },
                                                           onSuccess: function(file){
                                                               // console.log(this)
                                                           }
                                                       })
                                                

addMore

(
  • [option]
)
chainable

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

Available since 1.8.4

添加多个图片

Parameters:

  • [option] Object optional

    图片质量,默认0.8

    • [needCompress] Boolean optional

      1.5.3新增 是否需要压缩, 默认 false | true , true 以下的质量及宽度高度参数才会有效.

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

      1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数 原生: 默认来自 photo(相册) | camera(相机) | savephoto(来自保存的相册)

    • [destinationType] String optional

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

    • [onChange] Function optional

      改变时触发

    • [onSuccess] Function optional

      成功的回调

    • [onFail] Function optional

      失败的回调

Example:

       uiUpload.addMore({
                                                           onChange: function(e){
                                                               if( e.target.files.length > 1){
                                                                   bui.hint("一次只能选择一张图片")
                                                                   // 不执行onSuccess
                                                                   return false;
                                                               }
                                                           },
                                                           onSuccess: function(file){
                                                               // console.log(this)
                                                           }
                                                       })
                                                

clear

() chainable

清空所有选择的文件

Example:

       uiUpload.clear();
                                                

currentIndex

()

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

Available since 1.5.2

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

Example:

       var currentIndex = uiUpload.currentIndex();
                                                

currentName

()

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

Available since 1.5.2

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

Example:

       var currentName = uiUpload.currentName();
                                                

data

()

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

Example:

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

hideLoading

() chainable

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

Available since 1.8.6

隐藏上传条

Example:

       uiUpload.hideLoading()
                                                

remove

(
  • [name]
)
chainable

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

Available since 1.5.2

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

Parameters:

  • [name] String optional

    图片索引|图片名称

Example:

       uiUpload.remove();
                                                

resize

(
  • [option]
)
chainable

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

Available since 1.5.3

修改图片大小

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

showLoading

() chainable

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

Available since 1.8.6

显示上传条

Example:

       uiUpload.showLoading()
                                                

start

(
  • [option]
)
chainable

开始上传,如果是多选的图片,接口要支持多文件上传,uiUpload.data() 包含文件和文件信息,可能还需要二次处理,不支持多文件上传可以调用 startAll 会把选择的图片多次上传。

Parameters:

  • [option] Object optional

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

    • [url] String optional

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

    • [headers] String optional

      附加在headers的参数

    • [fileKey] String optional

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

    • [data] Object optional

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

    • [onSuccess] Function optional

      上传成功的回调

    • [onFail] Function optional

      上传失败的回调

Example:

       1. 单文件上传示例:
                                                       
                                                       uiUpload.start({
                                                           url: "https://",
                                                           data: null,
                                                           onSuccess: function (res) {
                                                               // 成功
                                                           },
                                                           onFail: function (res,status) {
                                                               // 失败 status = "timeout" || "error" || "abort", "parsererror"
                                                           }
                                                       })
                                                
                                                       2. 接口支持多文件上传示例:1.8.4新增
                                                
                                                       let files = [];
                                                       let data = uiUpload.data();
                                                
                                                       data.forEach((item,index)=>{
                                                           // file文件字段
                                                           files.push(item.data)
                                                       })
                                                
                                                       uiUpload.start({
                                                           url: "https://",
                                                           data: {
                                                               file: files
                                                           },
                                                           onSuccess: function (res) {
                                                               // 成功
                                                           },
                                                           onFail: function (res,status) {
                                                               // 失败 status = "timeout" || "error" || "abort", "parsererror"
                                                           }
                                                       })
                                                
                                                       3. 接口不支持多文件上传,可以使用 startAll 多次上传接口
                                                

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

      上传失败的回调

    • [onEnd] Function optional

      1.6.2 全部上传成功或失败都会触发

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();