• 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 = "<div class="a-add dlist" id="history">";
        divHtml += "<div id="empty" class="ditem-empty"></div>";
        divHtml += "<img  src="../../images/remove.png" class="a-remove_video"></div>";
        $("#imgDiv").prepend(divHtml);
        createItem1(entry);
    }
    
    function createItem1(entry) {
        var hl = document.getElementById('history');
        //hl.innerHTML = '<li id="empty" class="ditem-empty"></li>';
        //hl.style.display = 'block';
        var le = document.getElementById('empty');
        var li = document.createElement('div');
        li.className = 'ditem';
        li.innerHTML = '<span class="iplay"><font class="ainf"></font></span>'
        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);
        }
    }
  • 相关阅读:
    这是阿里技术专家对 SRE 和稳定性保障的理解
    阿里四年技术 TL 的得失总结:如何做好技术 Team Leader
    深度 | 阿里云蒋江伟:什么是真正的云原生?
    亲历者说 | 完整记录一年多考拉海购的云原生之路
    Seata RPC 模块的重构之路
    对容器镜像的思考和讨论
    20 行代码:Serverless 架构下用 Python 轻松搞定图像分类和预测
    怎么提升写代码的能力
    云原生 DevOps 的 5 步升级路径
    dubbo-go 白话文 | 从零搭建 dubbogo 和 dubbo 的简单用例
  • 原文地址:https://www.cnblogs.com/yyjspace/p/12068428.html
Copyright © 2020-2023  润新知