HTML5 开发APP(打开相册以及图片上传)

Posted 2020-09-28 王二叉

   我们开发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.上传图片的功能这样就完成了。