全部产品
存储与CDN 数据库 安全 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网
媒体转码

JavaScript版本

更新时间:2017-06-07 13:26:11

  • 安装

    上传SDK下载

    在页面上引入下面两个JS脚本

    1. <script src="aliyun-sdk.min.js"></script>
    2. <script src="vod-sdk-upload-1.0.6.min.js"></script>
  • 创建VODUpload实例

    在这里需要设置回调函数

    1. var uploader = new VODUpload({
    2. // 开始上传
    3. 'onUploadstarted': function (uploadInfo) {
    4. log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    5. }
    6. // 文件上传成功
    7. 'onUploadSucceed': function (uploadInfo) {
    8. log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    9. },
    10. // 文件上传失败
    11. 'onUploadFailed': function (uploadInfo, code, message) {
    12. log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
    13. },
    14. // 文件上传进度,单位:字节
    15. 'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
    16. log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
    17. },
    18. // 安全令牌超时
    19. 'onUploadTokenExpired': function () {
    20. console.log("onUploadTokenExpired");
    21. // uploader.resumeUploadWithToken(accessKeyId, accessKeySecret, secretToken, expireTime);
    22. }
    23. });
  • 列表管理

    • 添加上传文件

      注意:支持的文件大小<=10G

      需要使用标准的input方式让用户选择文件

      1. <form action="">
      2. <input type="file" name="file" id="files" multiple/>
      3. </form>
      4. userData = '';
      5. document.getElementById("files")
      6. .addEventListener('change', function (event) {
      7. for(var i=0; i<event.target.files.length; i++) {
      8. // 逻辑代码
      9. }
      10. });

      获取到用户选择的文件后,添加到上传列表中

      1. uploader.addFile(event.target.files[i], endpoint, bucket, object, userData);

      上传时,如何指定媒体的属性(标题、标签、描述、类目、用户自定义数据)呢?addFile函数最后的参数userData是一个json对象。第一级的Vod是必须的,Vod下面有5个属性,示例如下:

      1. var userData = '{"Vod":{"Title":"我是标题",
      2. "Description":"我是描述",
      3. "CateId":"1",
      4. "Tags":"tag1,tag2,标签3",
      5. "UserData":"user data"}}';
    • 删除上传文件,index对应listFiles接口返回列表中元素的索引

      1. uploader.deleteFile(index);
    • 取消单个文件上传

      1. uploader.cancelFile(index);
    • 恢复单个文件上传

      1. uploader.resumeFile(index);
    • 获取上传文件列表

      1. uploader.listFiles();
      2. var list = uploader.listFiles();
      3. for (var i=0; i<list.length; i++) {
      4. log("file:" + list[i].file.name + ", status:" + list[i].state + ", endpoint:" + list[i].endpoint + ", bucket:" + list[i].bucket + ", object:" + list[i].object);
      5. }
    • 清理上传文件列表

      1. uploader.cleanList();
  • 上传控制

    • 开始上传

      1. uploader.startUpload();
    • 停止上传

      1. uploader.stopUpload();
    • 上传凭证失效后恢复上传

      1. uploader.resumeUploadWithToken(accessKeyId, accessKeySecret, secretToken, expireTime);
本文导读目录