mui 圖片的上傳預覽
阿新 • • 發佈：2019-02-15
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="../css/mui.min.css" rel="stylesheet" /> <script src="../js/mui.min.js"></script> <script src="../js/jquery-1.9.min.js"></script> <style> .imageup{ width:100px; height: 36px; line-height:36px;} .button{ width:100px; height: 50px; line-height:50px;} </style> </head> <body> <img id="headimg" src='' height="150" width="150"> <p><a href="javascript:;" class="imageup">上傳圖片</a> </p> <p><button onclick="upload();" class='button'> 提交</button></p> <script> function plusReady(){ // 彈出系統選擇按鈕框 mui("body").on("tap",".imageup",function(){ page.imgUp(); }) } var page=null; page={ imgUp:function(){ var m=this; plus.nativeUI.actionSheet({cancel:"取消",buttons:[ {title:"拍照"}, {title:"從相簿中選擇"} ]}, function(e){//1 是拍照 2 從相簿中選擇 switch(e.index){ case 1:appendByCamera();break; case 2:appendByGallery();break; } }); } //攝像頭 } // 拍照新增檔案 function appendByCamera(){ plus.camera.getCamera().captureImage(function(e){ console.log(e); plus.io.resolveLocalFileSystemURL(e, function(entry) { var path = entry.toLocalURL(); document.getElementById("headimg").src = path; //就是這裡www.bcty365.com }, function(e) { mui.toast("讀取拍照檔案錯誤：" + e.message); }); }); } // 從相簿新增檔案 function appendByGallery(){ plus.gallery.pick(function(path){ document.getElementById("headimg").src = path; }); } //服務端介面路徑 var server = "http://www.test.cn/aaa.php"; //獲取圖片元素 var files = document.getElementById('headimg'); // 上傳檔案 function upload(){ console.log(files.src); var wt=plus.nativeUI.showWaiting(); var task=plus.uploader.createUpload(server, {method:"POST"}, function(t,status){ //上傳完成 if(status==200){ alert("上傳成功："+t.responseText); wt.close(); //關閉等待提示按鈕 }else{ alert("上傳失敗："+status); wt.close();//關閉等待提示按鈕 } } ); //新增其他引數 task.addData("name","test"); task.addFile(files.src,{key:"dddd"}); task.start(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </body> </html>