我們開發app，常常會遇到讓用戶上傳文件的功能。比如讓用戶上傳頭像。我公司的業務要求是讓用戶上傳支付寶收款二維碼，來實現用戶提現的功能。想要調用相冊要靠HTML Plus來實現。先上效果圖
基本功能是點擊按鈕就上傳圖片，然后獲取到圖片在服務器上的路徑。
首先我們要打開相冊，使用gallery模塊管理系統相冊來打開相冊
mui('#shangchuan')[0].addEventListener('tap',function(){
chooseImg();
})
function chooseImg(){
plus.gallery.pick(
//打開成功的回調函數
function(paths){
},
//打開失敗的回調函數
function(e){mui.toast(e.Message);},
//filter文件類型，gallery下的pick 是可以選擇視頻的。maximum是選擇的個數
{filter:"image",system:false,multiple:true,maximum:3}
)
}
現在我們已經可以打開相冊了，成功了第一步。接下來就是上傳圖片了。上傳圖片的代碼在打開成功的回調函數中來執行
function chooseImg(){
plus.gallery.pick(
function(paths){
//嗯，你要找的就是這+++++
plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload(
//你要上傳的后台文件地址，我后面會給一個php 源碼的
'http://www.************8y/upload.php',
{ method:"POST"},
function (t,status){
plus.nativeUI.closeWaiting();
console.log(t.responseText);
//t.responseText里會返回數據如下
//{"uper0":{"name":"uper0","url":"S7b3264117722a8a16882e41fe6dd089.jpg","type":"image\/jpeg","size":31499}}
//看到url了吧。可以找到這張圖片上傳后的路徑了，下面可以根據自己功能寫自己的代碼了。
mui.toast('上傳成功');
}
);
for(i in paths.files){
task.addFile(paths.files[i],{key:'uper'+i,'name':paths.files[i].substr(paths.files[i].lastIndexOf('/'))});
}
task.start();
},
function(e){mui.toast(e.Message);},
{filter:"image",system:false,multiple:true,maximum:3}
)
}
附加PHP代碼：
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$fs=array();
foreach ( $_FILES as $name=>$file ) {
if(move_uploaded_file($file['tmp_name'],$file['name'])){
$fs[$name]=array('name'=>$name,'url'=>$file['name'],'type'=>$file['type'],'size'=>$file['size']);
}else{
$fs[$name]=array('name'=>$name,'url'=>'error','type'=>$file['type'],'size'=>$file['size']);
}
}
echo json_encode($fs);
}else{
echo "{'error':'Unsupport GET request!'}";
}
?>
ok.上傳圖片的功能這樣就完成了。