Vimeo drop uploader点击上传

时间:2016-04-13 18:04:52

标签: dom click drag vimeo uploader

我在我的网站上使用vimeo drop uploader。我从

获得了上传

https://github.com/websemantics/vimeo-upload

当我放下图像时,它工作得很好。但我不知道如何点击打开上传窗口..

uploder没有文件输入,只有div

这是html

 <div class="progress">
  <div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%
   </div>
  </div>
  <div id="drop_zone">Drop files here</div>

他们使用这个脚本

<script>
 function handleFileSelect(evt) {
         evt.stopPropagation();
         evt.preventDefault();
         var files = evt.dataTransfer.files; // FileList object.

         var accessToken = document.getElementById("accessToken").value;
         var upgrade_to_1080 = document.getElementById("upgrade_to_1080").checked;

         // Set Video Data
         var videoName = document.getElementById("videoName").value;
         var videoDescription = document.getElementById("videoDescription").value;

         // Clear the results div
         var node = document.getElementById('results');
         while (node.hasChildNodes()) node.removeChild(node.firstChild);

         // Rest the progress bar
         updateProgress(0);

         var uploader = new MediaUploader({
             file: files[0],
             token: accessToken,
             upgrade_to_1080: upgrade_to_1080,
             videoData: {
                name: (videoName > '') ? videoName : 'Default name',
                description: (videoDescription > '') ? videoDescription : 'Default description'
             },
             onError: function(data) {

                var errorResponse = JSON.parse(data);
                message = errorResponse.error;

                var element = document.createElement("div");
                element.setAttribute('class', "alert alert-danger");
                element.appendChild(document.createTextNode(message));
                document.getElementById('results1').appendChild(element);


             },
             onProgress: function(data) {
                updateProgress(data.loaded / data.total);
             },
             onComplete: function(videoId) {

                var url = "https://vimeo.com/"+videoId;

                document.getElementById("video").value = url;

                //var a = document.createElement('a');
//                a.appendChild(document.createTextNode(url));
//                a.setAttribute('href',url);
//
//                var element = document.createElement("div");
//                element.setAttribute('class', "alert alert-success");
//                element.appendChild(a);
//
//                document.getElementById('results').appendChild(element);
             }
         });
         uploader.upload();
       }

       /**
        * Dragover handler to set the drop effect.
        */
       function handleDragOver(evt) {
         evt.stopPropagation();
         evt.preventDefault();
         evt.dataTransfer.dropEffect = 'copy';
       }

       /**
        * Wire up drag & drop listeners once page loads
        */
       document.addEventListener('DOMContentLoaded', function () {
           var dropZone = document.getElementById('drop_zone');
           dropZone.addEventListener('dragover', handleDragOver, false);
           dropZone.addEventListener('drop', handleFileSelect, false);

       });

   var elem = document.getElementById('drop_zone');
   if(elem && document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, false);
      elem.dispatchEvent(evt);
   }



       /**
        * Updat progress bar.
        */
       function updateProgress(progress) {
          progress = Math.floor(progress * 100);
          var element = document.getElementById('progress');
          element.setAttribute('style', 'width:'+progress+'%');
          element.innerHTML = progress+'%';
       }


      progress
 </script>

您能否帮我解决一下如何点击上传视频..

演示https://github.com/googledrive/cors-upload-sample

由于

0 个答案:

没有答案