WebUploader 大文件或视频上传

13 篇文章 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;
        }

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值