在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.name
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发出请求:
- processData: false,//用来回避jquery对formdata的默认序列化，XMLHttpRequest会对其进行正确处理
- contentType: 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 = _file.name.lastIndexOf(".") var type = _file.name.substring(index + 1); switch(type){ case "flv": type = "video/x-flv"; break; } return type; }
文件播放 采用html5 推出的video元素：
支持flash播放，采用flowplayer
<div style="height:100%;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" onclick="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, '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重新加载 }