Web SQL Database+mui上传视频


后台接口

//pathContent为FileReader的onloadend事件中返回的target.result
public string getUrl(string pathContent)
        {
            int length = pathContent.Length;
            string comname = "";
            
            string base64 = pathContent.Substring(pathContent.IndexOf(",") + 1);
            try
            {
                string inputStr = base64;
                byte[] arr = Convert.FromBase64String(inputStr);
                comname = Guid.NewGuid().ToString() + ".mp4";
                MemoryStream ms = new MemoryStream(arr);
                AliyunOSS.PutObject(bucketName, "离线整改/" + comname, ms);
                ms.Close();
                
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
            return "离线整改/" + comname;
        }

选择视频

var videos = [];
var i = 1;
var w = null;
//上传视频
document.getElementById('video').addEventListener('tap', function(e) {
    if (mui.os.plus) {
        var buttonTit = [{
            title: "录制"
        }, {
            title: "从手机相册选择"
        }];
    
        plus.nativeUI.actionSheet({
            cancel: "取消",
            buttons: buttonTit
        }, function(b) {
            switch (b.index) {
                case 0:
                    break;
                case 1:
                    getVideo(); //录制视频
                    break;
                case 2:
                    galleryVideo(); //打开相册
                    break;
                default:
                    break;
            }
        })
    }
});
//录制
function getVideo() {
    var cmr = plus.camera.getCamera();
    cmr.startVideoCapture(function(p) {
        console.log('成功:' + p);
        plus.io.resolveLocalFileSystemURL(p, function(entry) {
            createItem(entry);
            entry.file(function(evt) {
                appendVideo(p, evt);
            });
        }, function(e) {
            console.log('读取录像文件错误:' + e.message);
        });
    }, function(e) {
        console.log('失败:' + e.message);
    }, {
        filename: '_doc/camera/',
        index: i
    });
}
// 从相册中选择视频
function galleryVideo() {
    plus.gallery.pick(function(e) {
        plus.io.resolveLocalFileSystemURL(e, function(entry) {
            createItem(entry);
            entry.file(function(evt) {
                appendVideo(e, evt);
            });

        }, function(p) {
            console.log('读取录像文件错误:' + p.message);
        });
    }, function(e) {
        console.log("取消选择视频");
    }, {
        filter: "video"
    });
}
// 添加播放项
function createItem(entry) {
    $("#history").remove();
    var divHtml = "
"; divHtml += "
"; divHtml += "
"; $("#imgDiv").prepend(divHtml); createItem1(entry); } function createItem1(entry) { var hl = document.getElementById('history'); //hl.innerHTML = '
  • ';
    //hl.style.display = 'block'; var le = document.getElementById('empty'); var li = document.createElement('div'); li.className = 'ditem'; li.innerHTML = '' li.setAttribute('onclick', 'displayFile(this)'); hl.insertBefore(li, le.nextSibling); li.querySelector('.ainf').innerText = '...'; li.entry = entry; updateInformation(li); // 设置空项不可见 le.style.display = 'none'; } // 显示文件 function displayFile(li) { if (w) { mui.alert('重复点击!'); return; } if (!li || !li.entry) { mui.alert('无效的媒体文件'); return; } var name = li.entry.name; var suffix = name.substr(name.lastIndexOf('.')); var url = ''; if (suffix == '.mov' || suffix == '.3gp' || suffix == '.mp4' || suffix == '.avi') { url = '/plus/camera_video.html'; } else { url = '/plus/camera_image.html'; } w = plus.webview.create(url, url, { hardwareAccelerated: true, scrollIndicator: 'none', scalable: true, bounce: 'all' }); w.addEventListener('loaded', function() { w.evalJS('loadMedia("' + li.entry.toLocalURL() + '")'); }, false); w.addEventListener('close', function() { w = null; }, false); w.show('pop-in'); } // 获取录音文件信息 function updateInformation(li) { if (!li || !li.entry) { return; } var entry = li.entry; entry.getMetadata(function(metadata) { li.querySelector('.ainf').innerText = dateToStr(metadata.modificationTime); }, function(e) { console.log('获取文件"' + entry.name + '"信息失败:' + e.message); }); } var vindex = 1; //视频 function appendVideo(e, evt) { videos = []; var reader = new plus.io.FileReader(); reader.readAsDataURL(evt); reader.onloadend = function(e) { var videoSrc = e.target.result; //console.log(videoSrc); videos.push({ name: "file", //这个值服务器会用到,作为file的key path: e, src: videoSrc }); vindex++; } }

    离线保存

    function saveImage(business_id, business_type, item_id, file_type, create_user, imageStr) {
        db.transaction(function(tx) {
            var guid = new GUID();
            var id = guid.newGUID();
            var create_date = getDate();
            tx.executeSql('insert into im_file values(?,?,?,?,?,?,?,?)', [id, business_id, business_type,
                item_id, file_type, create_user, create_date, imageStr
            ], imageSuccess, imageError);
        });
    }
    
    function imageSuccess(tx, rs) {
        files = [];
        index = 1;
        $("#imgDiv").find(".a-add").remove();
        $("#text-h").val('');
        GetConfirmItem();
        //启用下拉刷新
        plus.webview.currentWebview().setPullToRefresh({
            support: true,
            style: "circle",
            offset: '100px'
        });
    }
    
    function imageError(tx, error) {
        files = [];
        mui.alert("上传失败,错误信息:" + error.message);
        //console.log("上传失败,错误信息:" + error.message);
    }
    //视频
    function videoUpload() {
        for (var i = 0; i < videos.length; i++) {
            var f = videos[i];
            var e = f.path;
            var dataURL = f.src;
            saveImage(confirm_id, "整改确认", localStorage.getItem("record_id"), "2", localStorage.getItem("realName"), dataURL);
        }
    }