與安卓交互的上傳圖片 與 上傳語音、視頻

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();