js上傳進度條

<script type="text/javascript">
    $(function () {
        DemoForm.init('${empty cmsInfo.infoId ? seq:cmsInfo.infoId}','${cmsModule.moduleId}');
        
        $("#submit").click(function(){


        $('#videoURL').html("");
        $(".progress-bar").width('0%');
        $(".progress").show();
        var formData = new FormData(); 
        formData.append("file", document.getElementById('file').files[0]); 
        //formData.append("token", token_value); 

        $.ajax({ 
            url: "/ClouldCms/cms/CmsVideo/insertVideo.action",
            type: "POST", 
            data: formData, 
            dataType : "json",
            processData: false, // 不要對data參數進行序列化處理，默認爲true
            contentType: false, // 不要設置Content-Type請求頭，由於文件數據是以 multipart/form-data 來編碼
            xhr: function(){
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                  myXhr.upload.addEventListener('progress',function(e) {
                    if (e.lengthComputable) {
                      var percent = Math.floor(e.loaded/e.total*100);
                      if(percent <= 100) {
                     
                    //  alert(percent);
                       // $("#J_progress_bar").progress('set progress', percent);
                       // $("#J_progress_label").html('已上傳：'+percent+'%');
                     $(".progress-bar").width(percent+'%');
                       
                      }
                      //if(percent >= 100) {
                        //$("#J_progress_label").html('文件上傳完畢，請等待...');
                        //$("#J_progress_label").addClass('success');
                      //}
                    }
                  }, false);
                }
                return myXhr;
            },
            success: function(res){ 
      //alert(res.flag);
            if(res.flag){
      //alert("123123");
            var r = $("#videoPath").val(res.data);
      //alert("上傳視頻成功");
      $(".progress").hide();
      $('#videoURL').html('<video  id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}"><source  src="' + basePath + "/" + res.data + '" type="video/mp4" /></video>');


      }
            },
            error: function(res) {
                // 請求失敗
                console.log(res);
            }
            
        }); 
       }); 
        //上傳視頻
       /**    $("#submit").click(function(){
      var formData = new FormData();
      formData.append('file', $('#file')[0].files[0]);
    $.ajax({    
            url : "/ClouldCms/cms/CmsVideo/insertVideo.action",    
            type : "POST",    
            data : formData,
            dataType : "json",
            cache: false,
            processData: false,
            contentType: false,
      success:function(res) {
      if(res.flag){
      var r = $("#videoPath").val(res.data);
      alert("上傳視頻成功"+res.data);
      $('#videoURL').html('<video  id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="500" height="300" data-setup="{}"><source  src="' + basePath + "/" + res.data + '" type="video/mp4" /></video>');


      }
      }
    });*/
     
     
     


       /* $("#submit").click(function(){
     ajaxFileUpload({
     url:"/ClouldCms/cms/CmsVideo/insertVideo.action",
     secureuri:false,
     fileElement:"file",
     dataType:"json",
     success:function(data){
     alert(data);
     }
     });
       });  */
        //截圖，處理圖片
        $("#videoPic").on('click',function(){
           // createIMG();
            var scale = 0.5,
            video = $('#videoURL').find('video')[0],
            canvas = document.createElement("canvas"),
      canvasFill = canvas.getContext('2d');
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
var src = canvas.toDataURL("image/jpeg");
            $('#imgSmallView').html('<img src="' + src + '" alt="預覽圖" width="250" height="150" />');
            
            src = src.replace(/\+/g,"%2B");
            //var imageDate = src.substring(23);
           $.ajax({
            url:"/ClouldCms/cms/CmsVideo/ImagePath.action",
            type:"POST",
            data:"data="+src,
            dataType:"json",
            success:function(res){
            if(res.flag){
          $("#imgPath").val(res.data);
          alert("返回圖片路徑");
            }
            }
            });
        });
          
    });
  
</script>