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

使用HTMLPlus实现实现图片上传

最新推荐文章于 2023-11-23 14:16:57 发布

转载最新推荐文章于 2023-11-23 14:16:57 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangercha/p/7183196.html

本文介绍如何使用HTMLPlus实现从用户相册选择图片并上传至服务器的功能。通过调用plus.gallery.pick()方法打开相册，并在选择图片后通过plus.uploader.createUpload()方法上传至指定的PHP脚本进行处理。

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

转载于:https://www.cnblogs.com/wangercha/p/7183196.html