Upload images with Android and upload voice, video

1. Interaction with Android voice

Note: The src that gets the voice needs to be fetched with DOM elements

(1) HTML (click the button to tell Android that the recording starts and ends)

<class= "Voice"  onclick= "voicecli ()"> upload Voice  </span>

(2) JS

//Click VoicefunctionVoicecli () {$ ('. AddPicture '). Hide (); $('. Expaddvoice '). Show (); //Adjustment Method    //judging the Android method to show or hide the voice    if($ (". Voice"). Text () = = "Upload Voice") {        $(". Voice"). Text ("Cancel speech");  Window.contact.isVisShow (); //Call the Android method, tell Android recording to start, Android Display recording button }Else if($ (". Voice"). Text () = = "Cancel Speech"){        $(". Voice"). Text ("Upload Voice");  Window.contact.isVisHide (); //Call the Android method, tell Android to finish recording, Android Cancel recording button }}

Click the Close icon Audio
$ ('. Yuyinclose '). Click (function () {
   $ ("#audiovis"). attr ("src", "");
   $ (". Exchvoiceclose"). Hide ();
});

(3) HTML (voice bar after recording completed)

<Divclass= "Exchvoiceclose"> 　　 <Iclass= "Iconfont i-shengyin">& #xe607;</I> //Sound icons    <span></span>   <AudioID= "Audiovis"src=""></Audio> //Audio tags    <emclass= "Iconfont icon-guanbi yuyinclose"></em> //Voice bar off button </Div>

(4) JS (write a method for Android to call, pass the voice path)

//Voice method for Android tuningfunctionDell () {//get voice path from Android    varVoices= "http://219.140.191.226:8080/agriculture/uploads/" +Window.contact.Vis (); //var voices= "http://192.168.199.108:8080/agriculture/uploads/" +window.contact.vis ();    //Get page Voice add path (obtained with DOM element)    varAudio2 = document.getElementById ("Audiovis"); AUDIO2.SRC=voices; //tell Android Voice playback when you click on The Voice bar$ ('. Exchvoiceclose '). Click (function() {Window.contact.jsGeiAndroidChuanzhi (voices);    }); //Voice Bar Display    if(voices!=NULL) {        $(". Exchvoiceclose"). Show (); }}

(5) Display of the detail Page Voice bar

Dynamically create voice bar labels

// Voice if null && Datas[i].voice! = "")    {+ = "<div onclick=playvoice ('" + Datas[i].voice + "') > "+           " <div class= ' Exchvoice ' > "+           " <i class= ' Iconfont i-shengyin ' >& #xe607; </i><span C Lass= ' second ' ></span> ' +
"<audio src= '" +urllogo+datas[i].voice+ "></audio>" +   //urllogo is the server address
"</div>" +
"</div>";}

Click Play Voice, send value to Android

// Play Voice function playvoice (URL) {Window.contact.jsGeiAndroidChuanzhi (Urllogo+URL);}

2. Interaction with Android video

1. HTML

Where to store the video tag
<class= "Videoplay"></div>  

2, JS dynamically create a video tag (window.open ("http://www.baidu.com") open a new window)

 if  (Data[0].url! = ""  '. Videoplay    '). HTML (""  var   urls = Data[0].url.replace ("    http://"," " = "/http" + URLs; //video links form an outer chain   var  videos = "<video class= ' videoplaycount ' controls= ' controls ' src= '" +urls+ "    ' ></video> ' ; $ ( '. Videoplay '  

// Click the Back button to remove the video tag, and Android calls this method function Goivideo () {    if($ ('. Govideo>video '). Length>0) {        $ ('. Govideo '). Children ( ' Video '). Remove ();    }}
Called at the return key

3. Interaction with Android upload image

(1) HTMl Click Upload Image button, and picture storage location

<!--get the string picture from the server--
<inputtype= "hidden"name="Imgurl"ID   Value= ""/>

<Divclass= "AddPicture clearfix">    <Divclass= "Addpictureimg"ID= "Imgboxid"></Div> //Picture location     <Divclass= "Addpicturediv">         <labelclass= "Picturedivcon"> //Button           　　 <inputtype= ' file 'ID= "IMGINP"name= "File"class= "File"multiple= "multiple"  /> <!--onchange= "xmtanuploadimg (This)" -          　　 <Iclass= "Iconfont Icon-tianjiatupian"></I>         　　  <P>Add a picture</P>         </label>    </Div></Div>

(2) off the Android method, take pictures from the server

//get the value from the servervarI=r;//for counting (the first few photos)functionh5getpicnamefromandroid () {k++; Window.contact.jsGeiAndroidToken ("PicA");//Adjust the Android method, pass the fixed value to Judge    varImgurl = Window.contact.getPicName ();//get the path from Android    varImgurlstr=imgurl.split (",");//separates the captured pictures    varStr= ""; STR=$ ("#imgurl"). Val ();//store img For input to each submission page    if(str== "") {//if it's the first picture$ ("#imgurl"). Val (imgurlstr[0]); }Else{        $("#imgurl"). Val (str+ "," +imgurlstr[0]); }    varimgstr= "<div class= ' img-div ' ><i onclick= Clicks (This, "+k+") class= ' Iconfont icon-guanbi addpictureclose ' ></i></div> "; Imgstr=imgstr.replace (' @src ', urllogo+imgurlstr[0]); varOimgbox=document.getelementbyid ("Imgboxid"); Oimgbox.appendchild (Ndiv);}

(3) Click the Delete button to delete the image from the server.

// Picture Delete button 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) Get pictures on the page

var imgurl=$ ("Input[name=imgurl]"). Val ();

Upload images with Android and upload voice, video