Amaze UI

Upload


文件上传组件。

下面所有实例使用贴图库提供的 API 进行演示。

基础用法

选择文件后会自动上传。

Copy
<div
  data-am-upload="{
    hideTime: false,
    header:{url:'http://up.imgapi.com/'},
    data: {
      Token: 'e1b8937ef7b50ad06a095310c4cfc2356e56b22f:irywcHjrTsFjCEFOKn0ur8JPFR8=:eyJkZWFkbGluZSI6MTQ4MjE0NjkxOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoiNTgxNzE2IiwiYWlkIjoiMTI2NzI5NCIsImZyb20iOiJmaWxlIn0=',
    }
  }">
</div>
  • 按照右侧所示组织 HTML 结构, 按钮样式可自行修改。
  • 使用 data-am-upload 配置上传选项。
  • 文件上传进度为实际上传到服务器时的实时进度。

在线运行

自定义配置

Copy
<div id="my-upload">
</div>
<script>
$(function() {
  $('#my-upload').upload({
    header: {
      url: 'http://up.imgapi.com/',
      complete: function(res) {
        console.log(res);
      },
      error: function(res) {
        console.log(res)
      }
    },
    data: {
      Token: 'e1b8937ef7b50ad06a095310c4cfc2356e56b22f:irywcHjrTsFjCEFOKn0ur8JPFR8=:eyJkZWFkbGluZSI6MTQ4MjE0NjkxOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoiNTgxNzE2IiwiYWlkIjoiMTI2NzI5NCIsImZyb20iOiJmaWxlIn0=',
    }
  })
})
</script>
  • 参数 header 的设置与 jQuery ajax header 设置相同,不做额外说明。查看下面实例进行设置。
  • 参数 data 设置额外的数据,用户名、密码、Cookie、token等。
  • 在文件管理器中,使用按住 ctrl 进行多选

在线运行

获取文件信息

Copy
<button type="button" class="am-btn am-btn-primary" id="getFiles">文件信息获取,在控制台中查看详细信息</button>
<script>
$(function(){
  $('#getFiles').click(function() {
    var fileList = $('#my-upload').upload('getFileList')
    console.log(fileList)
  })
})
</script>

使用参数 getFileList 获取已经上传成功后的文件及文件列表信息。

在线运行

文件信息及列表

文件上传成功后会自动更新文件列表,执行 删除 操作也会自动删除文件列表中对应的文件信息。

  1. 文件信息: 文件信息是已经成功上传的文件的原始信息,额外添加了 uuid 作为识别符。

    {
    lastModified: 1481507893366,
    lastModifiedDate: Mon Dec 12 2016 09:58:13 GMT+0800 (中国标准时间),
    name: "wallhaven-462752.jpg",
    size: 1882336,
    type: "image/jpeg",
    uuid: "am-upload-bo3g3", // 插件自动添加的唯一识别符
    }
  2. 文件列表: 文件列表是由文件信息组成的数组。

参数说明

参数类型描述
typeObject限定文件上传类型
sizeNumber限定文件大小,单位为 KB; 设为 false 不限大小
hideTimeNumber进度条消失时间,单位 ms; 设为 false 不消失
headerObjectajax 请求头设置,与 jQuery ajax 设置相同
dataObject额外的表单数据
tplString上传按钮模板, 用于自定义样式和配置多文件上传

额外说明

  • 上传使用 FormData, 故不支持 IE9
  • header 参数为 AJAX 中的 header, 所以具体配置查看 jQuery 文档即可。
    // 默认 header 配置
    var header = {
    url: '',
    type: 'POST',
    cache: false,
    data: data,
    timeout: 0,
    processData: false,
    contentType: false,
    }

方法

  • getFileList 获取文件列表信息

自定义事件

事件定义在 upload 元素上。

事件名称描述
complete.upload.amui文件上传100%后立即触发
delete.popover.amui在文件列表中删除文件后立即触发