使用resumable.js上传大文件（视频）兵转换flv格式-白红宇

使用resumable.js上传大文件（视频）兵转换flv格式

阅读量：5168 次

发布时间：2019-06-13

本文共 52933 字，大约阅读时间需要 176 分钟。

前台代码

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Video.aspx.cs" Inherits="BPMS.WEB.Video" %>  2   3   4   5   6   7     
        8     
        9     
       10      11      12     
       13      14  15  16      17      
      
        18              
       
 19             
        20             
       
         21                 
        选择视频 22             
       
 23             
       
         24                 
        
          25                     
            26                         
 31                         
 32                         
 38                     
 39                 
                               27 
            
              28 
             
 29 
            
 30                        33  34  35  36  37           
         
        
 40             
       
 41             
       
 42             
       130         
      
131         
      
       132             
       133             
       
134             视频列表：
       
135             
       
        136                 
        137             
       
138         
      
139 140 141

View Code

后台.cs

1 using System; 2 using System.Collections.Generic; 3 using System.Data; 4 using System.Linq; 5 using System.Text; 6 using System.Web; 7 using System.Web.UI; 8 using System.Web.UI.WebControls; 9 10 namespace BPMS.WEB11 {12     public partial class Video : System.Web.UI.Page13     {14         protected void Page_Load(object sender, EventArgs e)15         {16             load(); 17         }18         public void load() 19         {20             int TotalRecord = 0; int TotalPage = 0;21             DataTable dt = new BPMS.Business.GetPageTab().GetTab("SELECT *  FROM TB_Video" , 1, 100, "ID", "ID", out TotalRecord, out TotalPage);22              StringBuilder sb = new StringBuilder();23             foreach (DataRow row in dt.Rows)24             {25                sb.Append("" + row["FilePath"] + "   观看
");26             }27             this.Literal1.Text = sb.ToString();28         }29     }30 }

View Code

上传代码

1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using System.Web; 6 using System.Web.UI; 7 using System.Web.UI.WebControls; 8  9 namespace Html5Upload10 {11     public partial class savefile : System.Web.UI.Page12     {13         protected void Page_Load(object sender, EventArgs e)14         {15             System.Threading.Thread.Sleep(1000);16             Response.AddHeader("Content-Type", "application/json");17 18             if (Request.QueryString["resumableChunkNumber"] != null)19             {20                 string filedir = Request.MapPath("/ddUpload/temp/");21                 string savefile =  filedir+ Request.QueryString["resumableChunkNumber"] + ".lzp";22                 //Request.Files[0].SaveAs(savefile);23                 byte[] data = Request.BinaryRead(Request.ContentLength);24                 using (Stream file = File.Create(savefile))25                 {26                     file.Write(data, 0, data.Length);27                     file.Close();28                 }29 30                 if (Request.QueryString["resumableChunkNumber"] == Request.QueryString["resumableTotalChunks"])31                 {32                     MergeFile(filedir, ".lzp", Request.QueryString["resumableFilename"]);33                 }34             }35             36             Response.Write("die('{\"jsonrpc\" : \"2.0\", \"result\" : null, \"id\" : \"id\"}');");37             38         }39 40         /// 41         /// 要合并的文件夹目录42         /// 
43         /// 文件目录44         /// 扩展名45         /// 合并文件名46         bool MergeFile(string filePath, string Extension,string filename)47         {48             bool rBool = false;49             //获得当前目录下文件夹列表，按文件名排序50             SortedList
      
        FileList = new SortedList
       
        ();51             DirectoryInfo dirInfo = new DirectoryInfo(filePath);52 53             foreach (FileSystemInfo var in dirInfo.GetFileSystemInfos())54             {55                 if (var.Attributes != FileAttributes.Directory)56                 {57                     if (var.Extension == Extension)58                     {59                         FileList.Add(Convert.ToInt32(var.Name.Replace(Extension, "")), var.Name);60                     }61                 }62             }63 64             if (FileList.Count > 0) //存在文件65             {66                 FileStream outFile = new FileStream(filePath + "\\" + filename, FileMode.OpenOrCreate, FileAccess.Write);67                 using (outFile)68                 {69                     foreach (int item in FileList.Keys)70                     {71                         int data = 0;72                         byte[] buffer = new byte[1024];73 74                         FileStream inFile = new FileStream(filePath + "\\" + FileList[item], FileMode.OpenOrCreate, FileAccess.Read);75                         using (inFile)76                         {77                             while ((data = inFile.Read(buffer, 0, 1024)) > 0)78                             {79                                 outFile.Write(buffer, 0, data);80                             }81                             inFile.Close();82                         }83                     }84                     outFile.Close();85                     rBool = true; //合并成功86                 }87             }88 89             return rBool;90         }91     }92 }

View Code

视频转码代码

1 using DotNet.Utilities;  2 using System;  3 using System.Collections.Generic;  4 using System.IO;  5 using System.Linq;  6 using System.Web;  7   8 namespace BPMS.WEB.CommonModule.TB_Video  9 { 10     ///  11     /// UploadHandler 的摘要说明 12     /// 
 13     public class UploadHandler : IHttpHandler 14     { 15  16         public void ProcessRequest(HttpContext context) 17         { 18             context.Response.ContentType = "text/plain"; 19             context.Response.Buffer = true; 20             context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1); 21             context.Response.AddHeader("pragma", "no-cache"); 22             context.Response.AddHeader("cache-control", ""); 23             context.Response.CacheControl = "no-cache"; 24             string active = HttpContext.Current.Request["action"]; 25              26             switch (active) 27             { 28                 //case "Uploadify": //上传文件 29                 //    HttpPostedFile file = context.Request.Files["Filedata"]; 30                 //    string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\"; 31                 //    if (file != null) 32                 //    { 33                 //        string _FileName = file.FileName; 34                 //        string _FileSize = FileHelper.CountSize(file.ContentLength); 35                 //        string _Extension = System.IO.Path.GetExtension(file.FileName).ToLower(); 36                          37                 //        if (!Directory.Exists(uploadPath)) 38                 //        { 39                 //            Directory.CreateDirectory(uploadPath); 40                 //        } 41                 //        //+ _Extension 42                 //        file.SaveAs(uploadPath + _FileName ); 43                 //        context.Response.Write("1"); 44                 // } 45                 //    else 46                 //    { 47                 //        context.Response.Write("0"); 48                 //    } 49                 //    break; 50                 //case "Delete"://删除文件 51                 //    break; 52                 //case "download"://下载 53                      54                 //    break; 55                 case "VideoConvert": 56                     VideoConvert(context); 57                     break; 58                 default: 59                     break; 60             } 61         } 62  63         public void VideoConvert(HttpContext context)  64         { 65             string FilePath = context.Request["FilePath"]; 66             string path1 = "/ddUpload/temp/" + FilePath; 67             string path2Name = FilePath.Substring(0,FilePath.LastIndexOf('.'))+DateTime.Now.ToString("yyyyMMddHHmmss"); 68             string path2 = "/shuchu/"+path2Name+".flv"; 69             BPMS.WEB.Common.VideoConvert con = new Common.VideoConvert(); 70  71             bool isok = false; 72             string houzhui = FilePath.Substring(FilePath.LastIndexOf('.')); 73             if (houzhui.ToLower() == ".flv") 74             { 75                 File.Copy(context.Server.MapPath(path1),context.Server.MapPath(path2)); 76                 isok = true; 77             } 78             else  79             { 80                 isok = con.ConvertFlv(path1, path2); 81             } 82  83             if (isok) 84             { 85                 BPMS.Business.TB_Video bll = new Business.TB_Video(); 86                 BPMS.Entity.TB_Video entity = new BPMS.Entity.TB_Video(); 87                 entity.FilePath = path2Name; 88                 //entity.UserID = RequestSession.GetSessionUser().UserId; 89                 //entity.UserName = RequestSession.GetSessionUser().UserName; 90                 bll.Add(entity) ; 91                 context.Response.Write("{\"msg\":\""+path2Name+"\"}"); 92                 DeleteSignedFile(context.Server.MapPath("/ddUpload/temp/"), "lzp"); 93             } 94             else  95             { 96                 context.Response.Write("{\"msg\":\"0\"}"); 97             } 98             context.Response.End(); 99 100         }101 102         /// 103         /// 删除给定路径下的给定后缀名的文件104         /// 
105         /// 传入路径106         /// 传入后缀名107         /// 
      
       删除文件列表
      108         private static string[] DeleteSignedFile(string path, string suffixName)109         {110             string deletefiles = "";  //记录删除的文件名称111 112             DirectoryInfo di = new DirectoryInfo(path);113             //遍历该路径下的所有文件114             foreach (FileInfo fi in di.GetFiles())115             {116                 string exname = fi.Name.Substring(fi.Name.LastIndexOf(".") + 1);//得到后缀名117                 //判断当前文件后缀名是否与给定后缀名一样118                 if (exname == suffixName)119                 {120                     File.Delete(path + "\\" + fi.Name);//删除当前文件121                     deletefiles += fi.Name + ",";//追加删除文件列表122                 }123             }124 125             if (deletefiles != "")126                 deletefiles = deletefiles.Substring(0, deletefiles.Length - 1);127             return deletefiles.Split(',');//以数组形式返回删除文件列表128 129         }130 131         public bool IsReusable132         {133             get134             {135                 return false;136             }137         }138     }139 }

View Code

引用js代码

1 /*  2  * MIT Licensed  3  * http://www.23developer.com/opensource  4  * http://github.com/23/resumable.js  5  * Steffen Tiedemann Christensen, steffen@23company.com  6  */  7   8 (function () {  9     "use strict"; 10  11     var Resumable = function (opts) { 12         if (!(this instanceof Resumable)) { 13             return new Resumable(opts); 14         } 15         this.version = 1.0; 16         // SUPPORTED BY BROWSER? 17         // Check if these features are support by the browser: 18         // - File object type 19         // - Blob object type 20         // - FileList object type 21         // - slicing files 22         this.support = ( 23           (typeof (File) !== 'undefined') && 24           (typeof (Blob) !== 'undefined') && 25           (typeof (FileList) !== 'undefined') && 26           (!!Blob.prototype.webkitSlice || !!Blob.prototype.mozSlice || !!Blob.prototype.slice || false) 27         ); 28         if (!this.support) { 29             //alert("此上传控件兼容 火狐firefox， 谷歌Google Chrome，IE10 以上等浏览器！你的浏览器不支持此上传！"); 30             document.getElementById('spanerr').innerHTML = "提示：此上传控件兼容 火狐firefox， 谷歌Google Chrome，IE10 以上等浏览器！如果是双核模式浏览器,如360，百度，搜狗等浏览器！可切换成谷歌内核（极速模式）！"; 31             return (false); 32         } 33  34  35         // PROPERTIES 36         var $ = this; 37         $.files = []; 38         $.defaults = { 39             chunkSize: 1 * 1024 * 1024, 40             forceChunkSize: false, 41             simultaneousUploads: 3, 42             fileParameterName: 'file', 43             throttleProgressCallbacks: 0.5, 44             query: {}, 45             headers: {}, 46             preprocess: null, 47             method: 'multipart', 48             prioritizeFirstAndLastChunk: false, 49             target: '/', 50             testChunks: true, 51             generateUniqueIdentifier: null, 52             maxChunkRetries: undefined, 53             chunkRetryInterval: undefined, 54             permanentErrors: [404, 415, 500, 501], 55             maxFiles:1,//undefined, 56             withCredentials: false, 57             xhrTimeout: 0, 58             maxFilesErrorCallback: function (files, errorCount) { 59                 var maxFiles = $.getOpt('maxFiles'); 60                 alert('Please upload ' + maxFiles + ' file' + (maxFiles === 1 ? '' : 's') + ' at a time.'); 61             }, 62             minFileSize: 1, 63             minFileSizeErrorCallback: function (file, errorCount) { 64                 alert(file.fileName || file.name + ' is too small, please upload files larger than ' + $h.formatSize($.getOpt('minFileSize')) + '.'); 65             }, 66             maxFileSize: undefined, 67             maxFileSizeErrorCallback: function (file, errorCount) { 68                 alert(file.fileName || file.name + ' is too large, please upload files less than ' + $h.formatSize($.getOpt('maxFileSize')) + '.'); 69             }, 70             fileType: ['mp4', 'flv', 'rm', 'rmvb', 'avi', 'wmv', 'mpg', 'mpeg', '3gp', 'swf', 'asf', 'divx', 'xvid', '3gp2', 'flv1', 'mpeg1', 'mpeg2', 'mpeg3', 'mpeg4', 'h264'], 71             fileTypeErrorCallback: function (file, errorCount) { 72                 //alert(file.fileName || file.name + '' + $.getOpt('fileType') + '.'); 73                 document.getElementById('spanjindu').innerHTML = "请上传视频文件！"; 74                 //$("#spanjindu").html("请上传视频文件！"); 75             } 76         }; 77         $.opts = opts || {}; 78         $.getOpt = function (o) { 79             var $opt = this; 80             // Get multiple option if passed an array 81             if (o instanceof Array) { 82                 var options = {}; 83                 $h.each(o, function (option) { 84                     options[option] = $opt.getOpt(option); 85                 }); 86                 return options; 87             } 88             // Otherwise, just return a simple option 89             if ($opt instanceof ResumableChunk) { 90                 if (typeof $opt.opts[o] !== 'undefined') { 91                     return $opt.opts[o]; 92                 } else { 93                     $opt = $opt.fileObj; 94                 } 95             } 96             if ($opt instanceof ResumableFile) { 97                 if (typeof $opt.opts[o] !== 'undefined') { 98                     return $opt.opts[o]; 99                 } else {100                     $opt = $opt.resumableObj;101                 }102             }103             if ($opt instanceof Resumable) {104                 if (typeof $opt.opts[o] !== 'undefined') {105                     return $opt.opts[o];106                 } else {107                     return $opt.defaults[o];108                 }109             }110         };111 112         // EVENTS113         // catchAll(event, ...)114         // fileSuccess(file), fileProgress(file), fileAdded(file, event), fileRetry(file), fileError(file, message),115         // complete(), progress(), error(message, file), pause()116         $.events = [];117         $.on = function (event, callback) {118             $.events.push(event.toLowerCase(), callback);119         };120         $.fire = function () {121             // `arguments` is an object, not array, in FF, so:122             var args = [];123             for (var i = 0; i < arguments.length; i++) args.push(arguments[i]);124             // Find event listeners, and support pseudo-event `catchAll`125             var event = args[0].toLowerCase();126             for (var i = 0; i <= $.events.length; i += 2) {127                 if ($.events[i] == event) $.events[i + 1].apply($, args.slice(1));128                 if ($.events[i] == 'catchall') $.events[i + 1].apply(null, args);129             }130             if (event == 'fileerror') $.fire('error', args[2], args[1]);131             if (event == 'fileprogress') $.fire('progress');132         };133 134 135         // INTERNAL HELPER METHODS (handy, but ultimately not part of uploading)136         var $h = {137             stopEvent: function (e) {138                 e.stopPropagation();139                 e.preventDefault();140             },141             each: function (o, callback) {142                 if (typeof (o.length) !== 'undefined') {143                     for (var i = 0; i < o.length; i++) {144                         // Array or FileList145                         if (callback(o[i]) === false) return;146                     }147                 } else {148                     for (i in o) {149                         // Object150                         if (callback(i, o[i]) === false) return;151                     }152                 }153             },154             generateUniqueIdentifier: function (file) {155                 var custom = $.getOpt('generateUniqueIdentifier');156                 if (typeof custom === 'function') {157                     return custom(file);158                 }159                 var relativePath = file.webkitRelativePath || file.fileName || file.name; // Some confusion in different versions of Firefox160                 var size = file.size;161                 return (size + '-' + relativePath.replace(/[^0-9a-zA-Z_-]/img, ''));162             },163             contains: function (array, test) {164                 var result = false;165 166                 $h.each(array, function (value) {167                     if (value == test) {168                         result = true;169                         return false;170                     }171                     return true;172                 });173 174                 return result;175             },176             formatSize: function (size) {177                 if (size < 1024) {178                     return size + ' bytes';179                 } else if (size < 1024 * 1024) {180                     return (size / 1024.0).toFixed(0) + ' KB';181                 } else if (size < 1024 * 1024 * 1024) {182                     return (size / 1024.0 / 1024.0).toFixed(1) + ' MB';183                 } else {184                     return (size / 1024.0 / 1024.0 / 1024.0).toFixed(1) + ' GB';185                 }186             },187             getTarget: function (params) {188                 var target = $.getOpt('target');189                 if (target.indexOf('?') < 0) {190                     target += '?';191                 } else {192                     target += '&';193                 }194                 return target + params.join('&');195             }196         };197 198         var onDrop = function (event) {199             $h.stopEvent(event);200             appendFilesFromFileList(event.dataTransfer.files, event);201         };202         var onDragOver = function (e) {203             e.preventDefault();204         };205 206         // INTERNAL METHODS (both handy and responsible for the heavy load)207         var appendFilesFromFileList = function (fileList, event) {208             // check for uploading too many files209             var errorCount = 0;210             var o = $.getOpt(['maxFiles', 'minFileSize', 'maxFileSize', 'maxFilesErrorCallback', 'minFileSizeErrorCallback', 'maxFileSizeErrorCallback', 'fileType', 'fileTypeErrorCallback']);211             if (typeof (o.maxFiles) !== 'undefined' && o.maxFiles < (fileList.length + $.files.length)) {212                 // if single-file upload, file is already added, and trying to add 1 new file, simply replace the already-added file 213                 if (o.maxFiles === 1 && $.files.length === 1 && fileList.length === 1) {214                     $.removeFile($.files[0]);215                 } else {216                     o.maxFilesErrorCallback(fileList, errorCount++);217                     return false;218                 }219             }220             var files = [];221             $h.each(fileList, function (file) {222                 var fileName = file.name.split('.');223                 var fileType = fileName[fileName.length - 1].toLowerCase();224 225                 if (o.fileType.length > 0 && !$h.contains(o.fileType, fileType)) {226                     o.fileTypeErrorCallback(file, errorCount++);227                     return false;228                 }229 230                 if (typeof (o.minFileSize) !== 'undefined' && file.size < o.minFileSize) {231                     o.minFileSizeErrorCallback(file, errorCount++);232                     return false;233                 }234                 if (typeof (o.maxFileSize) !== 'undefined' && file.size > o.maxFileSize) {235                     o.maxFileSizeErrorCallback(file, errorCount++);236                     return false;237                 }238 239                 // directories have size == 0240                 if (!$.getFromUniqueIdentifier($h.generateUniqueIdentifier(file))) {241                     (function () {242                         var f = new ResumableFile($, file);243                         window.setTimeout(function () {244                             $.files.push(f);245                             files.push(f);246                             f.container = (typeof event != 'undefined' ? event.srcElement : null);247                             $.fire('fileAdded', f, event)248                         }, 0);249                     })()250                 };251             });252             window.setTimeout(function () {253                 $.fire('filesAdded', files)254             }, 0);255         };256 257         // INTERNAL OBJECT TYPES258         function ResumableFile(resumableObj, file) {259             var $ = this;260             $.opts = {};261             $.getOpt = resumableObj.getOpt;262             $._prevProgress = 0;263             $.resumableObj = resumableObj;264             $.file = file;265             $.fileName = file.fileName || file.name; // Some confusion in different versions of Firefox266             $.size = file.size;267             $.relativePath = file.webkitRelativePath || $.fileName;268             $.uniqueIdentifier = $h.generateUniqueIdentifier(file);269             $._pause = false;270             $.container = '';271             $.startchunkindex = 0;272 273             var _error = false;274 275             // Callback when something happens within the chunk276             var chunkEvent = function (event, message) {277                 // event can be 'progress', 'success', 'error' or 'retry'278                 switch (event) {279                     case 'progress':280                         $.resumableObj.fire('fileProgress', $);281                         break;282                     case 'error':283                         $.abort();284                         _error = true;285                         $.chunks = [];286                         $.resumableObj.fire('fileError', $, message);287                         break;288                     case 'success':289                         if (_error) return;290                         $.resumableObj.fire('fileProgress', $); // it's at least progress291                         if ($.isComplete()) {292                             $.resumableObj.fire('fileSuccess', $, message);293                         }294                         break;295                     case 'retry':296                         $.resumableObj.fire('fileRetry', $);297                         break;298                 }299             };300 301             // Main code to set up a file object with chunks,302             // packaged to be able to handle retries if needed.303             $.chunks = [];304             $.abort = function () {305                 // Stop current uploads306                 var abortCount = 0;307                 $h.each($.chunks, function (c) {308                     if (c.status() == 'uploading') {309                         c.abort();310                         abortCount++;311                     }312                 });313                 if (abortCount > 0) $.resumableObj.fire('fileProgress', $);314             };315             $.cancel = function () {316                 // Reset this file to be void317                 var _chunks = $.chunks;318                 $.chunks = [];319                 // Stop current uploads320                 $h.each(_chunks, function (c) {321                     if (c.status() == 'uploading') {322                         c.abort();323                         $.resumableObj.uploadNextChunk();324                     }325                 });326                 $.resumableObj.removeFile($);327                 $.resumableObj.fire('fileProgress', $);328             };329             $.retry = function () {330                 $.bootstrap();331                 var firedRetry = false;332                 $.resumableObj.on('chunkingComplete', function () {333                     if (!firedRetry) $.resumableObj.upload();334                     firedRetry = true;335                 });336             };337             $.bootstrap = function () {338                 $.abort();339                 _error = false;340                 // Rebuild stack of chunks from file341                 $.chunks = [];342                 $._prevProgress = 0;343                 var round = $.getOpt('forceChunkSize') ? Math.ceil : Math.floor;344                 var maxOffset = Math.max(round($.file.size / $.getOpt('chunkSize')), 1);345                 for (var offset = 0; offset < maxOffset; offset++) {346                     (function (offset) {347                         window.setTimeout(function () {348                             $.chunks.push(new ResumableChunk($.resumableObj, $, offset, chunkEvent));349                             $.resumableObj.fire('chunkingProgress', $, offset / maxOffset);350                         }, 0);351                     })(offset)352                 }353                 window.setTimeout(function () {354                     $.resumableObj.fire('chunkingComplete', $);355                 }, 0);356             };357             $.progress = function () {358                 if (_error) return (1);359                 // Sum up progress across everything360                 var ret = 0;361                 var error = false;362                 $h.each($.chunks, function (c) {363                     if (c.status($.startchunkindex) == 'error') error = true;364                     ret += c.progress(true, $.startchunkindex); // get chunk progress relative to entire file365                     //console.info(c.progress(true,$.startchunkindex));366                 });367                 ret = (error ? 1 : (ret > 0.999 ? 1 : ret));368                 ret = Math.max($._prevProgress, ret); // We don't want to lose percentages when an upload is paused369                 $._prevProgress = ret;370                 return (ret);371             };372             $.isUploading = function () {373                 var uploading = false;374                 $h.each($.chunks, function (chunk) {375                     if (chunk.status() == 'uploading') {376                         uploading = true;377                         return (false);378                     }379                 });380                 return (uploading);381             };382             $.isComplete = function () {383                 var outstanding = false;384                 $h.each($.chunks, function (chunk) {385                     var status = chunk.status();386                     if (status == 'pending' || status == 'uploading' || chunk.preprocessState === 1) {387                         outstanding = true;388                         return (false);389                     }390                 });391                 return (!outstanding);392             };393             $.pause = function (pause) {394                 if (typeof (pause) === 'undefined') {395                     $._pause = ($._pause ? false : true);396                 } else {397                     $._pause = pause;398                 }399             };400             $.isPaused = function () {401                 return $._pause;402             };403 404 405             // Bootstrap and return406             $.resumableObj.fire('chunkingStart', $);407             $.bootstrap();408             return (this);409         }410 411         function ResumableChunk(resumableObj, fileObj, offset, callback) {412             var $ = this;413             $.opts = {};414             $.getOpt = resumableObj.getOpt;415             $.resumableObj = resumableObj;416             $.fileObj = fileObj;417             $.fileObjSize = fileObj.size;418             $.fileObjType = fileObj.file.type;419             $.offset = offset;420             $.callback = callback;421             $.lastProgressCallback = (new Date);422             $.tested = false;423             $.retries = 0;424             $.pendingRetry = false;425             $.preprocessState = 0; // 0 = unprocessed, 1 = processing, 2 = finished      426 427             // Computed properties428             var chunkSize = $.getOpt('chunkSize');429             $.loaded = 0;430             $.startByte = $.offset * chunkSize;431             $.endByte = Math.min($.fileObjSize, ($.offset + 1) * chunkSize);432             if ($.fileObjSize - $.endByte < chunkSize && !$.getOpt('forceChunkSize')) {433                 // The last chunk will be bigger than the chunk size, but less than 2*chunkSize434                 $.endByte = $.fileObjSize;435             }436             $.xhr = null;437 438             // test() makes a GET request without any data to see if the chunk has already been uploaded in a previous session439             $.test = function () {440                 // Set up request and listen for event441                 $.xhr = new XMLHttpRequest();442 443                 var testHandler = function (e) {444                     $.tested = true;445                     var status = $.status();446                     if (status == 'success') {447                         $.callback(status, $.message());448                         $.resumableObj.uploadNextChunk();449                     } else {450                         $.send();451                     }452                 };453                 $.xhr.addEventListener('load', testHandler, false);454                 $.xhr.addEventListener('error', testHandler, false);455 456                 // Add data from the query options457                 var params = [];458                 var customQuery = $.getOpt('query');459                 if (typeof customQuery == 'function') customQuery = customQuery($.fileObj, $);460                 $h.each(customQuery, function (k, v) {461                     params.push([encodeURIComponent(k), encodeURIComponent(v)].join('='));462                 });463                 // Add extra data to identify chunk464                 params.push(['resumableChunkNumber', encodeURIComponent($.offset + 1)].join('='));465                 params.push(['resumableChunkSize', encodeURIComponent($.getOpt('chunkSize'))].join('='));466                 params.push(['resumableCurrentChunkSize', encodeURIComponent($.endByte - $.startByte)].join('='));467                 params.push(['resumableTotalSize', encodeURIComponent($.fileObjSize)].join('='));468                 params.push(['resumableType', encodeURIComponent($.fileObjType)].join('='));469                 params.push(['resumableIdentifier', encodeURIComponent($.fileObj.uniqueIdentifier)].join('='));470                 params.push(['resumableFilename', encodeURIComponent($.fileObj.fileName)].join('='));471                 params.push(['resumableRelativePath', encodeURIComponent($.fileObj.relativePath)].join('='));472                 params.push(['resumableTotalChunks', encodeURIComponent($.fileObj.chunks.length)].join('='));473                 // Append the relevant chunk and send it474                 $.xhr.open('GET', $h.getTarget(params));475                 $.xhr.timeout = $.getOpt('xhrTimeout');476                 $.xhr.withCredentials = $.getOpt('withCredentials');477                 // Add data from header options478                 $h.each($.getOpt('headers'), function (k, v) {479                     $.xhr.setRequestHeader(k, v);480                 });481                 $.xhr.send(null);482             };483 484             $.preprocessFinished = function () {485                 $.preprocessState = 2;486                 $.send();487             };488 489             // send() uploads the actual data in a POST call490             $.send = function () {491                 var preprocess = $.getOpt('preprocess');492                 if (typeof preprocess === 'function') {493                     switch ($.preprocessState) {494                         case 0:495                             preprocess($);496                             $.preprocessState = 1;497                             return;498                         case 1:499                             return;500                         case 2:501                             break;502                     }503                 }504                 if ($.getOpt('testChunks') && !$.tested) {505                     $.test();506                     return;507                 }508 509                 // Set up request and listen for event510                 $.xhr = new XMLHttpRequest();511 512                 // Progress513                 $.xhr.upload.addEventListener('progress', function (e) {514                     if ((new Date) - $.lastProgressCallback > $.getOpt('throttleProgressCallbacks') * 1000) {515                         $.callback('progress');516                         $.lastProgressCallback = (new Date);517                     }518                     $.loaded = e.loaded || 0;519                 }, false);520                 $.loaded = 0;521                 $.pendingRetry = false;522                 $.callback('progress');523 524                 // Done (either done, failed or retry)525                 var doneHandler = function (e) {526                     var status = $.status();527                     if (status == 'success' || status == 'error') {528                         $.callback(status, $.message());529                         $.resumableObj.uploadNextChunk();530                     } else {531                         $.callback('retry', $.message());532                         $.abort();533                         $.retries++;534                         var retryInterval = $.getOpt('chunkRetryInterval');535                         if (retryInterval !== undefined) {536                             $.pendingRetry = true;537                             setTimeout($.send, retryInterval);538                         } else {539                             $.send();540                         }541                     }542                 };543                 $.xhr.addEventListener('load', doneHandler, false);544                 $.xhr.addEventListener('error', doneHandler, false);545 546                 // Set up the basic query data from Resumable547                 var query = {548                     resumableChunkNumber: $.offset + 1,549                     resumableChunkSize: $.getOpt('chunkSize'),550                     resumableCurrentChunkSize: $.endByte - $.startByte,551                     resumableTotalSize: $.fileObjSize,552                     resumableType: $.fileObjType,553                     resumableIdentifier: $.fileObj.uniqueIdentifier,554                     resumableFilename: $.fileObj.fileName,555                     resumableRelativePath: $.fileObj.relativePath,556                     resumableTotalChunks: $.fileObj.chunks.length557                 };558                 // Mix in custom data559                 var customQuery = $.getOpt('query');560                 if (typeof customQuery == 'function') customQuery = customQuery($.fileObj, $);561                 $h.each(customQuery, function (k, v) {562                     query[k] = v;563                 });564 565                 var func = ($.fileObj.file.slice ? 'slice' : ($.fileObj.file.mozSlice ? 'mozSlice' : ($.fileObj.file.webkitSlice ? 'webkitSlice' : 'slice'))),566                   bytes = $.fileObj.file[func]($.startByte, $.endByte),567                   data = null,568                   target = $.getOpt('target');569 570                 if ($.getOpt('method') === 'octet') {571                     // Add data from the query options572                     data = bytes;573                     var params = [];574                     $h.each(query, function (k, v) {575                         params.push([encodeURIComponent(k), encodeURIComponent(v)].join('='));576                     });577                     target = $h.getTarget(params);578                 } else {579                     // Add data from the query options580                     data = new FormData();581                     $h.each(query, function (k, v) {582                         data.append(k, v);583                     });584                     data.append($.getOpt('fileParameterName'), bytes);585                 }586 587                 $.xhr.open('POST', target);588                 $.xhr.timeout = $.getOpt('xhrTimeout');589                 $.xhr.withCredentials = $.getOpt('withCredentials');590                 // Add data from header options591                 $h.each($.getOpt('headers'), function (k, v) {592                     $.xhr.setRequestHeader(k, v);593                 });594                 $.xhr.send(data);595             };596             $.abort = function () {597                 // Abort and reset598                 if ($.xhr) $.xhr.abort();599                 $.xhr = null;600             };601             $.status = function (startchunkindex) {602 603                 if ($.offset < startchunkindex) {604                     // console.info($.offset+'success');605                     return ('success');606 607                 }608 609 610                 // Returns: 'pending', 'uploading', 'success', 'error'611                 if ($.pendingRetry) {612                     // if pending retry then that's effectively the same as actively uploading,613                     // there might just be a slight delay before the retry starts614                     return ('uploading');615                 } else if (!$.xhr) {616                     return ('pending');617                 } else if ($.xhr.readyState < 4) {618                     // Status is really 'OPENED', 'HEADERS_RECEIVED' or 'LOADING' - meaning that stuff is happening619                     return ('uploading');620                 } else {621 622 623                     if ($.xhr.status == 200) {624                         // HTTP 200, perfect625                         return ('success');626                     } else if ($h.contains($.getOpt('permanentErrors'), $.xhr.status) || $.retries >= $.getOpt('maxChunkRetries')) {627                         // HTTP 415/500/501, permanent error628                         return ('error');629                     } else {630                         // this should never happen, but we'll reset and queue a retry631                         // a likely case for this would be 503 service unavailable632                         $.abort();633                         return ('pending');634                     }635                 }636             };637             $.message = function () {638                 return ($.xhr ? $.xhr.responseText : '');639             };640             $.progress = function (relative, startchunkindex) {641                 if (typeof (relative) === 'undefined') relative = false;642                 var factor = (relative ? ($.endByte - $.startByte) / $.fileObjSize : 1);643                 if ($.pendingRetry) return (0);644                 var s = $.status(startchunkindex);645                 switch (s) {646                     case 'success':647                     case 'error':648                         return (1 * factor);649                     case 'pending':650                         return (0 * factor);651                     default:652                         return ($.loaded / ($.endByte - $.startByte) * factor);653                 }654             };655             return (this);656         }657 658         // QUEUE659         $.uploadNextChunk = function () {660             var found = false;661 662             // In some cases (such as videos) it's really handy to upload the first663             // and last chunk of a file quickly; this let's the server check the file's664             // metadata and determine if there's even a point in continuing.665             if ($.getOpt('prioritizeFirstAndLastChunk')) {666                 $h.each($.files, function (file) {667                     if (file.chunks.length && file.chunks[0].status() == 'pending' && file.chunks[0].preprocessState === 0) {668                         file.chunks[0].send();669                         found = true;670                         return (false);671                     }672                     if (file.chunks.length > 1 && file.chunks[file.chunks.length - 1].status() == 'pending' && file.chunks[file.chunks.length - 1].preprocessState === 0) {673                         file.chunks[file.chunks.length - 1].send();674                         found = true;675                         return (false);676                     }677                 });678                 if (found) return (true);679             }680 681             // Now, simply look for the next, best thing to upload682             $h.each($.files, function (file) {683                 if (file.isPaused() === false) {684                     // $h.each(file.chunks, function(chunk){
     685                     //   if(chunk.status()=='pending' && chunk.preprocessState === 0) {
     686                     //     chunk.send();687                     //     found = true;688                     //     return(false);689                     //   }690                     //  });691                     for (var i = file.startchunkindex; i < file.chunks.length; i++) {692 693                         if (file.chunks[i].status() == 'pending' && file.chunks[i].preprocessState === 0) {694                             file.chunks[i].send();695                             found = true;696                             return (false);697                         }698 699                     };700 701                 }702                 if (found) return (false);703             });704             if (found) return (true);705 706             // The are no more outstanding chunks to upload, check is everything is done707             var outstanding = false;708             $h.each($.files, function (file) {709                 if (!file.isComplete()) {710                     outstanding = true;711                     return (false);712                 }713             });714             if (!outstanding) {715                 // All chunks have been uploaded, complete716                 $.fire('complete');717             }718             return (false);719         };720 721 722         // PUBLIC METHODS FOR RESUMABLE.JS723         $.assignBrowse = function (domNodes, isDirectory) {724             if (typeof (domNodes.length) == 'undefined') domNodes = [domNodes];725 726             $h.each(domNodes, function (domNode) {727                 var input;728                 if (domNode.tagName === 'INPUT' && domNode.type === 'file') {729                     input = domNode;730                 } else {731                     input = document.createElement('input');732                     input.setAttribute('type', 'file');733                     input.style.display = 'none';734                     domNode.addEventListener('click', function () {735                         input.style.opacity = 0;736                         input.style.display = 'block';737                         input.focus();738                         input.click();739                         input.style.display = 'none';740                     }, false);741                     domNode.appendChild(input);742                 }743                 var maxFiles = $.getOpt('maxFiles');744                 if (typeof (maxFiles) === 'undefined' || maxFiles != 1) {745                     input.setAttribute('multiple', 'multiple');746                 } else {747                     input.removeAttribute('multiple');748                 }749                 if (isDirectory) {750                     input.setAttribute('webkitdirectory', 'webkitdirectory');751                 } else {752                     input.removeAttribute('webkitdirectory');753                 }754                 // When new files are added, simply append them to the overall list755                 input.addEventListener('change', function (e) {756                     appendFilesFromFileList(e.target.files, e);757                     e.target.value = '';758                 }, false);759             });760         };761         $.assignDrop = function (domNodes) {762             if (typeof (domNodes.length) == 'undefined') domNodes = [domNodes];763 764             $h.each(domNodes, function (domNode) {765                 domNode.addEventListener('dragover', onDragOver, false);766                 domNode.addEventListener('drop', onDrop, false);767             });768         };769         $.unAssignDrop = function (domNodes) {770             if (typeof (domNodes.length) == 'undefined') domNodes = [domNodes];771 772             $h.each(domNodes, function (domNode) {773                 domNode.removeEventListener('dragover', onDragOver);774                 domNode.removeEventListener('drop', onDrop);775             });776         };777         $.isUploading = function () {778             var uploading = false;779             $h.each($.files, function (file) {780                 if (file.isUploading()) {781                     uploading = true;782                     return (false);783                 }784             });785             return (uploading);786         };787         $.upload = function () {788             // Make sure we don't start too many uploads at once789             if ($.isUploading()) return;790             // Kick off the queue791             $.fire('uploadStart');792             for (var num = 1; num <= $.getOpt('simultaneousUploads') ; num++) {793                 $.uploadNextChunk();794             }795         };796         $.pause = function () {797             // Resume all chunks currently being uploaded798             $h.each($.files, function (file) {799                 file.abort();800             });801             $.fire('pause');802         };803         $.cancel = function () {804             for (var i = $.files.length - 1; i >= 0; i--) {805                 $.files[i].cancel();806             }807             $.fire('cancel');808         };809         $.progress = function () {810             var totalDone = 0;811             var totalSize = 0;812             // Resume all chunks currently being uploaded813             $h.each($.files, function (file) {814                 totalDone += file.progress() * file.size;815                 totalSize += file.size;816             });817             return (totalSize > 0 ? totalDone / totalSize : 0);818         };819         $.addFile = function (file, event) {820             appendFilesFromFileList([file], event);821         };822         $.removeFile = function (file) {823             for (var i = $.files.length - 1; i >= 0; i--) {824                 if ($.files[i] === file) {825                     $.files.splice(i, 1);826                 }827             }828         };829         $.getFromUniqueIdentifier = function (uniqueIdentifier) {830             var ret = false;831             $h.each($.files, function (f) {832                 if (f.uniqueIdentifier == uniqueIdentifier) ret = f;833             });834             return (ret);835         };836         $.getSize = function () {837             var totalSize = 0;838             $h.each($.files, function (file) {839                 totalSize += file.size;840             });841             return (totalSize);842         };843 844         return (this);845     };846 847 848     // Node.js-style export for Node and Component849     if (typeof module != 'undefined') {850         module.exports = Resumable;851     } else if (typeof define === "function" && define.amd) {852         // AMD/requirejs: Define the module853         define(function () {854             return Resumable;855         });856     } else {857         // Browser: Expose to window858         window.Resumable = Resumable;859     }860 861 })();

View Code

css 代码

1 /* Reset */ 2 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;padding:0;}table{
    border-collapse:collapse;border-spacing:0;}fieldset,img{
    border:0;}address,caption,cite,code,dfn,th,var{
    font-style:normal;font-weight:normal;}ol,ul {
    list-style:none;}caption,th {
    text-align:left;}h1,h2,h3,h4,h5,h6{
    font-size:100%;font-weight:normal;}q:before,q:after{
    content:'';}abbr,acronym {
    border:0;} 3  4 /* Baseline */ 5 body, p, h1, h2, h3, h4, h5, h6 {
    font:normal 12px/1.3em Helvetica, Arial, sans-serif; color:#333; } 6 h1 {
    font-size:22px; font-weight:bold;} 7 h2 {
    font-size:19px; font-weight:bold;} 8 h3 {
    font-size:16px; font-weight:bold;} 9 h4 {
    font-size:14px; font-weight:bold;}10 h5 {
    font-size:12px; font-weight:bold;}11 p {
    margin:10px 0;}12 13 14 /*body {text-align:center; margin:40px;}*/15 #frame {
    margin:0 auto; width:560px; text-align:left;}16 17 18 19 /* Uploader: Drag & Drop */20 .resumable-error {
    display:none; font-size:14px; font-style:italic;}21 .resumable-drop {
    padding:10px; font-size:16px; text-align:left; color:#666; font-weight:bold;background-color:#eee; border:2px dashed #aaa; border-radius:10px; margin-top:20px; z-index:9999;  height:20px; width:70px;}22 .resumable-dragover {
    padding:30px; color:#555; background-color:#ddd; border:1px solid #999;}23 24 /* Uploader: Progress bar */25 .resumable-progress {
    margin:30px 0 30px 0; width:100%; display:none;}26 .progress-container {
    height:7px; background:#9CBD94; position:relative; }27 .progress-bar {
    position:absolute; top:0; left:0; bottom:0; background:#45913A; width:0;}28 .progress-text {
    font-size:11px; line-height:9px; padding-left:10px;}29 .progress-pause {
    padding:0 0 0 7px;}30 .progress-resume-link {
    display:none;}31 .is-paused .progress-resume-link {
    display:inline;}32 .is-paused .progress-pause-link {
    display:none;}33 .is-complete .progress-pause {
    display:none;}34 35 /* Uploader: List of items being uploaded */36 .resumable-list {
    overflow:auto; margin-right:-20px; display:none;}37 .uploader-item {
    width:148px; height:90px; background-color:#666; position:relative; border:2px solid black; float:left; margin:0 6px 6px 0;}38 .uploader-item-thumbnail {
    width:100%; height:100%; position:absolute; top:0; left:0;}39 .uploader-item img.uploader-item-thumbnail {
    opacity:0;}40 .uploader-item-creating-thumbnail {
    padding:0 5px; font-size:9px; color:white;}41 .uploader-item-title {
    position:absolute; font-size:9px; line-height:11px; padding:3px 50px 3px 5px; bottom:0; left:0; right:0; color:white; background-color:rgba(0,0,0,0.6); min-height:27px;}42 .uploader-item-status {
    position:absolute; bottom:3px; right:3px;}43 44 /* Uploader: Hover & Active status */45 .uploader-item:hover, .is-active .uploader-item {
    border-color:#4a873c; cursor:pointer; }46 .uploader-item:hover .uploader-item-title, .is-active .uploader-item .uploader-item-title {
    background-color:rgba(74,135,60,0.8);}47 48 /* Uploader: Error status */49 .is-error .uploader-item:hover, .is-active.is-error .uploader-item {
    border-color:#900;}50 .is-error .uploader-item:hover .uploader-item-title, .is-active.is-error .uploader-item .uploader-item-title {
    background-color:rgba(153,0,0,0.6);}51 .is-error .uploader-item-creating-thumbnail {
    display:none;}

View Code

图片 resume.png

图片pause.png

转载于:https://www.cnblogs.com/jiebo/p/4300725.html

你可能感兴趣的文章