前台代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Video.aspx.cs" Inherits="BPMS.WEB.Video" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <meta name="renderer" content="webkit" /> 9 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> 10 <title></title> 11 <script src="/Themes/Scripts/jquery-1.8.2.min.js"></script> 12 <link rel="stylesheet" type="text/css" href="/ddUpload/css/style.css" /> 13 <script src="/ddUpload/js/resumable.js" charset="utf-8"></script> 14 </head> 15 <body> 16 17 <div id="frame"> 18 <br /> 19 <span style="color: red; font-size: 12px;" id="spanerr"></span> 20 <div class="resumable-drop" ondragenter="jQuery(this).addClass('resumable-dragover');" ondragend="jQuery(this).removeClass('resumable-dragover');" ondrop="jQuery(this).removeClass('resumable-dragover');"> 21 <a class="resumable-browse" href="#" style="text-decoration: none;">选择视频</a> 22 </div> 23 <div class="resumable-progress"> 24 <table> 25 <tr> 26 <td width="100%"> 27 <div class="progress-container"> 28 <div class="progress-bar"></div> 29 </div> 30 </td> 31 <td class="progress-text" nowrap="nowrap"></td> 32 <td class="progress-pause" nowrap="nowrap"> 33 <a href="#" onclick="r.upload(); return(false);" class="progress-resume-link"> 34 <img src="/ddUpload/css/resume.png" title="Resume upload" /></a> 35 <a href="#" onclick="r.pause(); return(false);" class="progress-pause-link"> 36 <img src="/ddUpload/css/pause.png" title="Pause upload" /></a> 37 </td> 38 </tr> 39 </table> 40 </div> 41 <ul class="resumable-list"></ul> 42 <script> 43 var r = new Resumable({ 44 target: '/ddUpload/savefile.aspx', 45 chunkSize: 1 * 1024 * 1024, 46 simultaneousUploads: 1, 47 testChunks: false, 48 throttleProgressCallbacks: 1, 49 method: "octet" 50 }); 51 // Resumable.js isn't supported, fall back on a different method 52 if (!r.support) { 53 $('.resumable-error').show(); 54 55 } else { 56 // Show a place for dropping/selecting files 57 $('.resumable-drop').show(); 58 r.assignDrop($('.resumable-drop')[0]); 59 r.assignBrowse($('.resumable-browse')[0]); 60 var objName = ""; 61 // Handle file add event 62 r.on('fileAdded', function (file) { 63 file.startchunkindex = 0; // 设置当前文件开始上传的块数 64 // Show progress pabr 65 $('.resumable-progress, .resumable-list').show(); 66 // Show pause, hide resume 67 $('.resumable-progress .progress-resume-link').hide(); 68 $('.resumable-progress .progress-pause-link').show(); 69 // Add the file to the list 70 $('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>'); 71 $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName); 72 objName = file.fileName; 73 // Actually start the upload 74 r.upload(); 75 }); 76 77 r.on('uploadStart', function () { 78 $('.resumable-progress .progress-resume-link').hide(); 79 $('.resumable-progress .progress-pause-link').show(); 80 }); 81 r.on('pause', function () { 82 // Show resume, hide pause 83 $('.resumable-progress .progress-resume-link').show(); 84 $('.resumable-progress .progress-pause-link').hide(); 85 }); 86 r.on('complete', function () { 87 // Hide pause/resume when the upload has completed 88 $('.resumable-progress .progress-resume-link, .resumable-progress .progress-pause-link').hide(); 89 $("#spanjindu").html("文件上传完成正在转码！请耐心等候！"); 90 $.ajax({ 91 //请求的路径 92 url: "/CommonModule/TB_Video/UploadHandler.ashx?action=VideoConvert&FilePath=" + objName, 93 //请求的方法 94 type: "post", 95 dataType: "json", 96 //请求成功时调用 97 success: function (msg) { 98 if (msg["msg"] != "0") { 99 $("#spanjindu").html("转码完成！请保存数据！"); 100 window.location = "/Video.aspx"; 101 } else { 102 $("#spanjindu").html("转码失败！请联系相关人员"); 103 } 104 }, 105 //请求失败时调用 106 error: function (msg) { 107 alert(msg); 108 } 109 }); 110 111 112 }); 113 r.on('fileSuccess', function (file, message) { 114 // Reflect that the file upload has completed 115 $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(completed)'); 116 }); 117 r.on('fileError', function (file, message) { 118 // Reflect that the file upload has resulted in error 119 $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(file could not be uploaded: ' + message + ')'); 120 }); 121 r.on('fileProgress', function (file) { 122 //alert(file.progress()); 123 // Handle progress for both the file and the overall upload 124 125 $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html(Math.floor(file.progress() * 100) + '%'); 126 $('.progress-bar').css({ width: Math.floor(r.progress() * 100) + '%' }); 127 }); 128 } 129 </script> 130 </div> 131 <div style="padding-top: 50px; padding-left: 200px;"> 132 <span style="color: blue; font-size: 16px" id="spanjindu"></span> 133 <br /> 134 视频列表：<br /> 135 <ul> 136 <asp:Literal ID="Literal1" runat="server"></asp:Literal> 137 </ul> 138 </div> 139 140 </body> 141 </html>