jq和原声js写视频上传

来源:互联网 发布:win10系统优化技巧 编辑:程序博客网 时间:2024/04/24 18:09
这个是我近期用jq和原声写的视频上传,
获取视频文件的各种信息并做处理:
//上传视频$(function(){$('#upload_video').click(function(){$('#upload_video_').click();});$('#upload_video_').bind('change', function (evt) {//限制文件大小var fileSize = document.getElementById('upload_video_').files[0].size;if(fileSize>=1024*1024*20){box.msg('上传视频超出大小,请选择小一点的视频!');return false;}box.loading('正在上传...');//上传文件var fd = new FormData();fd.append("fileToUpload", document.getElementById('upload_video_').files[0]);var xhr = new XMLHttpRequest();//进度//xhr.upload.addEventListener("progress", uploadProgress, false);//成功返回xhr.addEventListener("load", uploadComplete, false);//失败返回xhr.addEventListener("error", uploadFailed, false);xhr.addEventListener("abort", uploadCanceled, false);//请求地址xhr.open("POST", "{:U('Upload/upload_video_form_tx')}");xhr.send(fd);});//进度条function uploadProgress(evt) {if (evt.lengthComputable) {//计算进度var percent = parseInt(Math.round(evt.loaded * 100 / evt.total));$('#progressNumber').html(percent + '%');if(percent == 100){$('#progressNumber').hide();box.loading('正在处理视频..');}}else {box.loading('正在上传...');}}//返回值function uploadComplete(evt) {var data = JSON.parse(evt.target.responseText);if(data.ret == 1){//视频信息存储save_video(data.path);box.close();box.msg('上传成功!');}}//视频存入数据库function save_video(path){$.post("{:U('TechManager/saveVideo')}",{path:path},function(data){if(data.ret == false){box.msg('上传失败,请重新尝试!');} else {path = 'http://huijing10-10046087.video.myqcloud.com'+path;save_video_for_tech(data.id);album_video(data.id,path);}},'json');}//显示上传的视频function album_video(id,path){//删除之前上传的视频del_video();//显示上传的视频html  =  '<img src="__IMG__/vd_sing_min.png" style="width: 100%;height:100%" video_id="' + id + '" />'; //审核中封面//html ='<video  src="' + path + '" video_id="' + id + '" width=100% height=100% poster="'+video_cover+'" >' +//video标签去掉//'<source src="' + path + '" type="video/ogg">' +//'<source src="' + path + '" type="video/mp4">' +//'<source src="' + path + '" type="video/webm">' +//'<object data="' + path + '" >' +//'<embed  src="' + path + '">' +//'</object>' +//'</video>';var album_id = id;$('#album_video').attr('album_id',album_id);$('#upload_video').html(html);}function uploadFailed(evt) {box.close();box.msg('上传失败,请重新尝试!');}function uploadCanceled(evt) {box.close();box.msg('上传失败,请重新尝试!');}//把上传的视频放到数据库function save_video_for_tech(album_video){$.post("{:U('TechManager/ajaxPackage')}",{data_type:3,album_video:album_video},function(data){});}//删除视频function del_video(){var video_id = $('#upload_video').find('img').attr('video_id');if(video_id){$.post("{:U('TechManager/album_video_del')}", {'video_id': video_id}, function (ret) {});}}});
前端代码
<div class="dr_img" id="upload_video"></div><input name="upload_video_" id="upload_video_" type="file" accept="video/*" enctype="multipart/form-data"   class="hidd" onclick="this.form.reset();">


                                             
0 0