jquery 上传视频进度

转载

mob64ca1402a190 2024-11-27 14:42:07

文章标签 jquery 上传视频进度 javascript json 前端 ViewUI 文章分类 jQuery 前端开发

在html5出来之前上传文件，只能通过流传入到后端，由服务器对文件类型大小解析。

并且要设置form表单提交的方式。

默认表单提交方式

enctype="application/x-www-form-urlencoded"
当 input type 是 "file" 时，值是 "multipart/form-data"。

html5出来后，这些问题可以在前端实现了，实现了上传前文件类型大小检查预览功能。

<input type="file"  mutiple="mutiple" accept=""/>

accept	设置或返回指示文件传输的 MIME 类型的列表（逗号分隔）。

File对象：

var file = $("[type=file]")[0].files[0];

file.size
file.type
file.slice(start,end)
$("[type=file]").change(function(){
　　var file = this.files[0];
})

另外一个对象FormData ，使得ajax数据传输成为可能：

var form = new FormData();
form.append("data", file);

还有一种formData的构造方式：

var form = document.forms.namedItem('myForm');   //通过form的name构造
var formData = new FormData(form);

此时要修改ajax的默认contentType和processData，或者用原生的XMLHttpRequest发出请求:

false,//用来回避jquery对formdata的默认序列化，XMLHttpRequest会对其进行正确处理
false,//设为false才会获得正确的contentType，FormData内部有contentType，因此我们在构造时不需也不能为其设置contentType。

$.ajax({
                url :gbl_contextPath +'/file/uploadSliceFile',
                type : 'POST',
                data : form,
                contentType : false, //这两个参数需要被定义，否则报错
                processData : false,
                dataType : "json",
　　　　　　　　　　xhr : function(e){

var xhr = $.ajaxSettings.xhr();
 　　　　　　　　　　　　if (xhr.upload) { 
 　　　　　　　　　　　　　　xhr.upload.addEventListener('progress', function(e) {
 　　　　　　　　　　　　　　j$("..modal-in:visible .modal-title").text("数据上传中..." + parseInt(e.loaded/e.total*100) + "%");
 　　　　　　　　　　　　　　if(e.loaded >= e.total){
 　　　　　　　　　　　　　　　　j$("..modal-in:visible .modal-title").text("数据处理中...");
 　　　　　　　　　　　　　　}
 　　　　　　　　　　　　　　}, false); 
 　　　　　　　　　　　　}
 　　　　　　　　　　　　return xhr;　　　　　　　　　　　}

jquery从1.5开始不对外暴露xhr了，因此需要在进行ajax请求的时候自己传入一个xhr来获取上传进度。

xhr = window.XMLHttpRequest；

以下是视频文件上传：

// 大文件上传提交
video.fileSubmit = function(_formId){
    var indexArray = new Array();
    $(_formId).submit(function(event){
        event.preventDefault(); //阻止当前提交事件
        // 切分文件
        var file = $(this).find("[type=file]")[0].files[0];
        var name = new Date().getTime();
        var size = file.size;
        var succeed = 0;
        var sliceSize = 2 * 1024 * 1024;//以2MB为一个分片
        var sliceCount = Math.ceil(size / sliceSize);//总片数
        var type = video.getType(file);
        // 循环数据上传
        for(var i = 0; i < sliceCount; i++){
            // 判断续传
            if(indexArray.length > 0 && indexArray.contains(i + 1)){
                console.log("continue");
                succeed ++;
                continue;
            }
            var start = i * sliceSize;
            var end = Math.min(size, start + sliceSize);
            var form = new FormData();
            form.append("data", file.slice(start,end));  //slice方法用于切出文件的一部分
            form.append("name", name);
            form.append("total", sliceCount);  //总片数
            form.append("size", size);
            form.append("index", i + 1);        //当前是第几
            form.append("type", type);
            $.ajax({
                url :gbl_contextPath +'/file/uploadSliceFile',
                type : 'POST',
                data : form,
                contentType : false, //这两个参数需要被定义，否则报错
                processData : false,
                dataType : "json",
                success : function(data) {
                    
                    // 进度条更新
                    ++succeed;
                    var percent = ((succeed / sliceCount).toFixed(2)) * 100;
                    video.updateProgress(percent +'%');
                    if (succeed == sliceCount) {
                        $("#upload").removeAttr("disabled");
                    }
                    if (data.success) {
                        // 全部传完毕
                        if(data.end && succeed == sliceCount){
                            messageShow("文件上传成功！","alert", "");
                            
                            $("#rcoUrl").val(data.fileSavePath);
                            indexArray=[];
                            return;
                        }
                        // 部分上传成功
                        indexArray.push(data.fileIndex);
                    } else {
                        $("#fileError").text("文件上传失败，请续传！");
                        $("#fileError").css("display", "block");
                        $(".fileinput-upload-button").text("续传");
                        $(".fileinput-upload-button").removeAttr("disabled");
                    }
                },
                error : function() {
                    $("#fileError").text("文件上传失败，请续传！");
                    $("#fileError").css("display", "block");
                    $(".fileinput-upload-button").text("续传");
                    $(".fileinput-upload-button").removeAttr("disabled");
                }
            })
        }
  })
}

video.updateProgress = function(percentage) {
    $("#output").text(percentage);
    $('.progress .progress-bar').css('width', percentage);
}

video.getType = function(_file){
    if(_file.type != ""){
        return _file.type;
    }
    var index = _.lastIndexOf(".")
    var type = _.substring(index + 1);
    switch(type){
    case "flv":
        type = "video/x-flv";
        break;
    }
    return type;
}

文件播放采用html5 推出的video元素：

支持flash播放，采用flowplayer

<div style="height:100%;width:100%;">
<div id="broadcast" class="float_left">
<div id="wrap" data-cuepoints="[0.9, 1.5]">
<%-- <video id="videoPlayer_1" class="video-js vjs-default-skin vjs-big-play-centered vjs-big-play-button"
       controls preload="metadata" width="100" height="600">
    <source src="${pageContext.request.contextPath}/file/broadcastVideo?rcoUrl=${coursewareVO.rcoUrl}" type='video/mp4' /><!-- 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件  -->
    <source src="${pageContext.request.contextPath}/file/broadcastVideo?rcoUrl=${coursewareVO.rcoUrl}" type='video/ogg' /><!-- 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件  -->
    <source src="${pageContext.request.contextPath}/file/broadcastVideo?rcoUrl=${coursewareVO.rcoUrl}" type='video/webm' /><!-- 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 -->
    <p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。</p>
</video> --%>
</div>
<input type="hidden" name="type" id="type" value="${type }"/>
<div id="out"></div>

</div>
<div class="course_play_menu float_right">
     <div class="play_menu_li">
        <ul>
          <li class="">
              <div class="course_menu_icon"><img src="${pageContext.request.contextPath}/static/elearning/images/course_menu_icon1.png"/></div>
              <div class="course_menu_name">目录</div>
           </li>
          <li>
             <div class="course_menu_icon"><img src="${pageContext.request.contextPath}/static/elearning/images/px_cycle_mid.png"/></div>
             <div class="course_menu_name">返回</div>
          </li>
       </ul>
       <div class="close_play_menu"> > </div>
       </div>
       <!-- 目录展示栏 -->
            <div class="course_menu_tab_div">
                <div class="course_menu_div">
                    <div id="course_directory_id" class="course_directory">
                                <c:forEach var="vo" items="${subCoursewareList}" varStatus="status">
                                    <div class="course_directory_div">
                                        <div class="course_directory_num">${status.count}</div>
                                        <div class="course_directory_name">
                                            <font class="font_blue_14">【课程】</font>${vo.rcoName}
                                        </div>
                                        <a href="#" class="course_directory_bnt" οnclick="reloadVideo(${vo.rcoId},'${vo.rcoUrl}');">视频播放</a>
                                        <div class="clear"></div>
                                    </div>
                                </c:forEach>
                    </div>
                </div>
            </div>
     </div>
</div>
     
<!--系统提示--> 
<div class="prompt_div">
<div class="prompt_box">
     <div class="prompt_title">
          <h1>系统提示</h1>
          <div class="prompt_close">X</div>
     </div>
     <div class="prompt_body" id="messageDiv">
          <p ><label id="messageDetail">您是否真的退出？</label></p>
          <div class="prompt_btn">
               <span  class="cancel" >取消</span>
               <span  class="ensure" >确定</span>
          </div>
     </div>
</div>
<div class="prompt_divbg"></div>
</div>

<script type="text/javascript">
var myFlowplayer = function(){
    $("#wrap").html('');
    var player = flowplayer("wrap", 
        {src:"${pageContext.request.contextPath}/static/management/video/js/flowplayer-3.2.18.swf",
        wmode: "opaque"},
    {
    logo : {
        url : '${pageContext.request.contextPath}/static/elearning/images/default_logo.jpg',
        top: 20,
        right: 200,
        opacity: 1.0, 
        width: '30%',
        height: '30%'
    },
    clip : {
        provider: 'nginx',
        url: '/${coursewareVO.rcoUrl}',
        scaling: 'fit',
        autoPlay: false,
        autoBuffering: true,
        onStart:function(){
        },
        onFinish:function(){
        },
        onPause : function(clip){
        },
        onStop : function(){
            
        },
        onBegin : function(){
        },
        onSeek: function(){
        }
    },
    plugins: {
        nginx: {
            url: "${pageContext.request.contextPath}/static/management/video/js/flowplayer.pseudostreaming-3.2.13.swf"
        },
        controls : {
            url : '${pageContext.request.contextPath}/static/management/video/js/flowplayer.controls-3.2.8.swf'
        }
    },
    onLoad:function(){
    },
    onError:function(error){
        messageShow("视频文件已损坏，或编码格式不被支持，请选择其它视频文件！", "alert", "");
    },
});
}
/**
 * 初始化配置
 */
 $(function(){
    // 如果没有子集，则目录不显示
    var subCourseSize = "${subCoursewareList.size()}";
    if(parseInt(subCourseSize) == 0){
        $(".play_menu_li li:first")[0].style.visibility = "hidden";
    }
    myFlowplayer();
 });


//video
// 页面加载准备状况(播放)
/* videojs(("#videoPlayer_1"), {"language":"zh-CN"},function(){
        this.on('play', function() {
        });
        this.on('error', function(){
            myFlowplayer();
        });
        this.on("loadstart", function(){
        });
        this.on('timeupdate', function () {
            });
        this.on('ended', function() {
            messageShow("播放完了", "alert", "");
        });
        this.on('pause', function() {
            });
    }); */
    
// 返回
function goBackScan(){
    var params = "id=" + ${parentId}
    + "&type=${type}";
window.location.href = "${pageContext.request.contextPath}/courseware/viewCoursewarePage?" +params;
}


// 重新加载视频
function reloadVideo(_rcoId, _rcoUrl){
    this.src = "${pageContext.request.contextPath}/file/broadcastVideo?rcoUrl="+_rcoUrl;
    $(".close_play_menu").click();
    reload("videoPlayer_1", src);
}

/**
 * 重新加载视频
 */
function reload(id,_rcoUrl){
    var myPlayer =  videojs("#"+id);  //初始化视频
    myPlayer.src(src);  //重置video的src
    myPlayer.load(src);  //使video重新加载
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。