WebUploader 大文件或视频上传

水深无声 2022-05-31 14:18 294阅读 0赞

WebUploader 上传东西其实没啥好说的，

原理更上传图片一样，只不过文件要大一点。

废话就不多说，上代码：

//html

<div id="uploader" class="wu-example">
                        
                        <div id="thelist" class="uploader-list"></div>
                        <div class="btns">
                            <div id="picker">选择文件</div>
                            @*<button id="ctlBtn" class="btn btn-default">开始上传</button>*@
                        </div>
                        <video src="" id="VideoSrc2" width="200">
                            您的浏览器不支持 video 标签。
                        </video>
                        <input name="submit" type="button" οnclick="getInfo()" value="获取播放时长" />
                    </div>

//js代码

_extensions = '3gp,mp4,rmvb,mov,avi,m4v';
    _mimeTypes = 'video/*,audio/*,application/*';
    
    //视频详情的js 这里就是那个视频重新写的js 后台没变只是多了一个判断
    $(function () {
        var $list = $('#thelist');
        var state = 'pending';
    
        var thumbnailWidth = 100;
        var thumbnailHeight = 100;
        var chunkSize = 500 * 1024;
        var uniqueFileName = null;
        var md5Mark = null;
    
    
        var uploader = WebUploader.create({
    
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/components/webuploader/',
            // 文件接收服务端。
            server: '/Toos/ViedoText?operation=uploadViedo',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            //pick: '.uploadBut',
            pick: '#picker',
    
            //限制文件格式 
            accept: {
                title: '视频上传',
                extensions: _extensions,
                mimeTypes: _mimeTypes
            },
            fileNumLimit: 1,//文件上传数量限制  
            threads: 1//上传并发数。允许同时最大上传进程数,为了保证文件上传顺序  
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            //resize: false
        });
    
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            $list.append('<div id="' + file.id + '" class="item">' +
                '<h4 id="FilevideoName" class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' + 
                '</div>');
        });
    
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }
            $li.find('p.state').text('上传中');
            $percent.css('width', percentage * 100 + '%');
        });
        uploader.on('uploadSuccess', function (file, response) {
            //$( '#'+file.id ).find('p.state').text('已上传');
            var data = response;
            $("#fileList").show();
            if (data == "0")
                $('#' + file.id).find('p.state').text('没有获取到文件');
            else if (data == "-1")
                $('#' + file.id).find('p.state').text('视频不能为空');
            else if (data == "-2")
                $('#' + file.id).find('p.state').text('视频类型错误');
            else if (data == "-3")
                $('#' + file.id).find('p.state').text('视频太大');
            else if (data == "-4")
                $('#' + file.id).find('p.state').text('视频文件名已存在');
            else {
                $('#' + file.id).find('p.state').text('视频上传成功');
                $("#VideoSrc2").get(0).src = data._raw;//视频播放
                $('#VideoSrc2').get(0).play();
            }
        });
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }
            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });
    })

//点击获取播放时长
         var time;
          function getInfo(){
              var pl = document.getElementById("VideoSrc2");
          time = pl.duration;
          alert(formatSeconds(time));
         }
          function formatSeconds(value) {
              var theTime = parseInt(value);// 秒
              var theTime1 = 0;// 分
              var theTime2 = 0;// 小时
              if (theTime > 60) {
                  theTime1 = parseInt(theTime / 60);
                  theTime = parseInt(theTime % 60);
                  if (theTime1 > 60) {
                      theTime2 = parseInt(theTime1 / 60);
                      theTime1 = parseInt(theTime1 % 60);
                  }
              }
              var result = "" + parseInt(theTime) + "秒";
              if (theTime1 > 0) {
                  result = "" + parseInt(theTime1) + "分" + result;
              }
              if (theTime2 > 0) {
                  result = "" + parseInt(theTime2) + "小时" + result;
              }
              return result;
          }

//后台代码

public ActionResult ViedoText(string operation)
            {
                if (operation == "uploadViedo")//上传视频
                {
                    if (Request.Files.Count != 0)
                    {
                        HttpPostedFileBase file = Request.Files[0];
                        string result = SaveUploadCategoriesImg(file);
                        return Content(result);
                    }
                    return Content("0");
                }
                return HttpNotFound();
            }
    
            public static string SaveUploadCategoriesImg(HttpPostedFileBase Video)
            {
                //判断文件是否为空
                if (Video == null)
                    return "-1";
    
                string fileName = Video.FileName;
                string extension = Path.GetExtension(fileName);
    
                //判断文件类型：只能为视频
                if (!StringCoreHelper.IsVideoFileName(fileName) || !CommonHelper.IsInArray(extension, ".3gp,.mp4,.rmvb,.mov,.avi,.m4v"))
                    return "-2";
    
                //判断文件大小
                int fileSize = Video.ContentLength;
                //if (fileSize > (5242880 * 50))
                //    return "-3";
    
                //文件保存路径
                //string dirPath = @"D:/File/Web/upload/Video/";
                //根据虚拟路径，转为物理路径
                string newFileName = fileName;
                string folder = "~/Video/";
                string dirPath = System.Web.Hosting.HostingEnvironment.MapPath(folder);
    
                //分片处理
                //string[] sizeList = StringCoreHelper.SplitString(shopConfig.UserAvatarThumbSize);
    
                //判断文件夹是否存在 不存在则创建
                if (!Directory.Exists(dirPath))
                    Directory.CreateDirectory(dirPath);
    
                //保存全路径
                string sourcePath = dirPath + newFileName;
    
                //判断文件是否存在
                if (Directory.Exists(sourcePath))
                    return "-4";
    
                Video.SaveAs(sourcePath);
    
                //foreach (string size in sizeList)//分片上传
                //{
                //    string thumbDirPath = string.Format("{0}thumb{1}/", dirPath, size);
                //    if (!Directory.Exists(thumbDirPath))
                //        Directory.CreateDirectory(thumbDirPath);
                //    string[] widthAndHeight = StringCoreHelper.SplitString(size, "_");
                //    IOHelper.GenerateThumb(sourcePath,
                //                           thumbDirPath + newFileName,
                //                           TypeHelper.StringToInt(widthAndHeight[0]),
                //                           TypeHelper.StringToInt(widthAndHeight[1]),
                //                           "H");
                //}
    
               
                return newFileName;
            }