jq和原聲js寫視訊上傳
阿新 • • 發佈:2019-01-06
這個是我近期用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();">