edit-icon download-icon

JavaScript version

Last Updated: Feb 11, 2018
  • Installation

    Download the upload SDK

    Introduce the following two JavaScript scripts on the page:

    1. <script src="aliyun-sdk.min.js"></script>
    2. <script src="vod-sdk-upload-1.0.6.min.js"></script>
  • Create a VODUpload instance

    Set the callback function.

    1. var uploader = new VODUpload({
    2. // Start upload
    3. 'onUploadstarted': function (uploadInfo) {
    4. log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    5. }
    6. // File upload succeeds
    7. 'onUploadSucceed': function (uploadInfo) {
    8. log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    9. },
    10. // File upload fails
    11. 'onUploadFailed': function (uploadInfo, code, message) {
    12. log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
    13. },
    14. // File upload progress, in byte
    15. 'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
    16. log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
    17. },
    18. // Token expires
    19. 'onUploadTokenExpired': function () {
    20. console.log("onUploadTokenExpired");
    21. // uploader.resumeUploadWithToken(accessKeyId, accessKeySecret, secretToken, expireTime);
    22. }
    23. });
  • List management

    • Add a file to be uploaded

      Note: The file size cannot exceed 10 GB.

      Use the standard input mode for selecting a file.

      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. // Logic code
      9. }
      10. });

      Obtain the selected file and add it to the upload list.

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

      During uploading, obtain the attributes (the title, tag, description, category, and custom data) of a media set in the following way: The last parameter userData of the addFile function is a JSON object. The first-level VOD is required, and VOD contains the five attributes. Example:

      1. var userData = '{"Vod":{"Title":"I am the title",
      2. "Description":"I am the description",
      3. "CateId":"1",
      4. "Tags":"tag1,tag2,tag3",
      5. "UserData":"user data"}}';
    • Delete the uploaded file.indexcorresponds to the index of the elements in the list returned by listFiles

      1. uploader.deleteFile(index);
    • Cancel upload of a single file

      1. uploader.cancelFile(index);
    • Resume upload of a single file

      1. uploader.resumeFile(index);
    • Obtain the upload file list

      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. }
    • Clear the upload file list

      1. uploader.cleanList();
  • Upload control

    • Start upload

      1. uploader.startUpload();
    • Stop upload

      1. uploader.stopUpload();
    • Resume upload after the upload credential becomes invalid

      1. uploader.resumeUploadWithToken(accessKeyId, accessKeySecret, secretToken, expireTime);
Thank you! We've received your feedback.