码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-11-13 16:38:52      阅读:156      评论:0      收藏:0      [点我收藏+]

标签: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();

 

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

标签:tpi   color   标签   style   dex   cti   传值   ica   size   

原文地址:http://www.cnblogs.com/dxt510/p/7826480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!