与安卓交互的上传图片 与 上传语音视频

Posted 2020-10-14 党欣彤

1、与安卓语音的交互

注意：获取语音的src 需要用DOM元素获取

（1）html （点击按钮告诉安卓，录音开始与结束）

<span class="voice" onclick="voicecli()">上传语音</span>

（2）JS  

//点击语音
function voicecli() {
    $(‘.addPicture‘).hide();
    $(‘.expaddVoice‘).show();
    //调方法
    //判断调安卓方法显示或隐藏语音
    if($(".voice").text()=="上传语音") {
        $(".voice").text("取消语音");
        window.contact.isVisShow();  //调用安卓方法，告诉安卓录音开始，安卓显示录音按钮
    }else if($(".voice").text()=="取消语音"){
        $(".voice").text("上传语音");
        window.contact.isVisHide();  //调用安卓方法，告诉安卓录音结束，安卓取消录音按钮
    }
}

//点击关闭图标音频
$(‘.yuyinClose‘).click(function() {
   $("#audiovis").attr("src","");
   $(".exchVoiceClose").hide();
});

（3）HTML （录音完成后的语音条）

<div class="exchVoiceClose">
　　<i class="iconfont i-shengyin">&#xe607;</i>    //声音图标
   <span></span>
   <audio id="audiovis" src=""></audio>   //音频标签
   <em class="iconfont icon-guanbi yuyinClose"></em>  //语音条关闭按钮
</div>

（4）JS （写一个方法供安卓调用，传语音路径）

//安卓调的语音方法
function dell() {
    //从安卓获取语音路径
    var voices="http://219.140.191.226:8080/agriculture/uploads/"+window.contact.Vis();
    // var voices="http://192.168.199.108:8080/agriculture/uploads/"+window.contact.Vis();

    //获取页面语音添路径（用DOM元素获取）
    var audio2 = document.getElementById("audiovis");
    audio2.src=voices;

    //点击语音条时告诉安卓语音播放
    $(‘.exchVoiceClose‘).click(function() {
        window.contact.jsGeiandroidChuanzhi(voices);
    });
    //语音条显示
    if(voices!=null) {
        $(".exchVoiceClose").show();
    }
}

（5）详情页语音条的显示

动态创建语音条标签

//语音
if (datas[i].voice != null && datas[i].voice != "") {
    str += "<div onclick=playvoice(‘" + datas[i].voice + "‘)>" +
           　　"<div class=‘exchVoice‘>" +
           　　　　"<i class=‘iconfont i-shengyin‘>&#xe607;</i><span class=‘second‘></span>" +
　　　　　　　　　　 "<audio src=‘"+urllogo+datas[i].voice+"‘></audio>" +   //urllogo 是服务器地址
　　　　　　 　　"</div>" +
　　　　　　 "</div>";
}

点击播放语音，给安卓传值

//播放语音
function playvoice(url){
　　window.contact.jsGeiAndroidChuanzhi(urllogo+url);
}

2、与安卓视频的交互

1、HTML

//存放video标签的位置
<div class="videoPlay"></div>  

2、JS 动态创建video标签（window.open("http://www.baidu.com")  打开一个新窗口）

if(data[0].url != "") {
    $(‘.videoPlay‘).html("");
    var urls = data[0].url.replace("http://","");
    urls = "http://" + urls;   //视频链接形成外链
    var videos = "<video class=‘videoPlaycount‘ controls=‘controls‘ src=‘"+urls+"‘></video>";
    $(‘.videoPlay‘).html(videos);
}

//点击返回键video标签移除，并且安卓调用此方法
function goivideo() {
    if($(‘.govideo>video‘).length>0) {
        $(‘.govideo‘).children(‘video‘).remove();
    }
}
//返回键处调用

3、与安卓上传图片的交互

（1）HTMl 点击上传图片按钮，和图片存放位置

<!-- 从服务器拿到字符串图片-->
<input type="hidden" name="imgurl" id="imgurl" value=""/>

<div class="addPicture clearfix">
    <div class="addPictureImg" id="imgboxid"></div> //图片位置
    <div class="addPictureDiv"> 
         <label class="pictureDivCon">  //按钮
         　　<input type=‘file‘ id="imgInp" name="file" class="file" multiple="multiple"  /> <!-- onchange="xmTanUploadImg(this)"-->
         　　<i class="iconfont icon-tianjiatupian"></i>
        　　 <p>添加图片</p>
         </label>
    </div>
</div>

（2）掉安卓方法，从服务器拿取图片

//从服务器拿值
var k=0;//用于记数 （第几张照片）
function  H5getPicNameFromAndroid() {
    k++;
    window.contact.jsGeiAndroidToken("picA");  //调安卓方法，传一下固定值进行判断
    var imgurl = window.contact.getPicName();  //从安卓拿到路径
    var imgurlstr=imgurl.split(",");  //将获取到的图片分隔
    var str="";
    str=$("#imgurl").val();  //给各个提交页面的input存储img
    if(str==""){ //如果是第一张图片
        $("#imgurl").val(imgurlstr[0]);
    }else{
        $("#imgurl").val(str+","+imgurlstr[0]);
    }
    var imgstr="<div class=‘img-div‘><img style=‘width:2.25rem;height:2.25rem‘  src=‘@src‘/><i onclick=clicks(this,"+k+") class=‘iconfont icon-guanbi addPictureClose‘></i></div>";
    imgstr=imgstr.replace(‘@src‘, urllogo+imgurlstr[0]);
    var oimgbox=document.getElementById("imgboxid");
    oimgbox.appendChild(ndiv);
}

（3）点击删除按钮，删除服务器中的图片

//图片删除按钮
function clicks(me,index){
    var str=$("#imgurl").val();
    var img=str.split(",");
    img.splice((index-1),1);
    img.toString();
    $("#imgurl").val(img);
    $(me).parent().remove();
}

（4）页面中获取图片

var imgurl=$("input[name=imgurl]").val();