全部产品
视频点播

JavaScript上传SDK

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

  • 安装

    在页面上引入下面两个JS脚本,见 视频上传SDK下载

    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. // uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
    6. }
    7. // 文件上传成功
    8. 'onUploadSucceed': function (uploadInfo) {
    9. log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    10. },
    11. // 文件上传失败
    12. 'onUploadFailed': function (uploadInfo, code, message) {
    13. log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
    14. },
    15. // 文件上传进度,单位:字节
    16. 'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
    17. log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
    18. },
    19. // 上传凭证超时
    20. 'onUploadTokenExpired': function () {
    21. console.log("onUploadTokenExpired");
    22. // uploader.resumeUploadWithAuth(uploadAuth);
    23. }
    24. });
  • 列表管理

    • 添加上传文件

      注意:支持的文件大小<=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], null, null, null, userData);

      上传时,可以选择是否启用水印和优先级,userData是一个json对象。第一级的Vod是必须的,Vod下面有2个属性,示例如下:

      1. var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
    • 删除上传文件

      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.resumeUploadWithAuth(uploadAuth);
    • 设置上传地址和上传凭证

      1. uploader.setUploadAuthAndAddress(uploadAuth, uploadAddress);
本文导读目录
本文导读目录
以上内容是否对您有帮助?