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

標籤：tpi   color   標籤   style   dex   cti   傳值   ica   size   

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

 

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