锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识相册图片上传开发app

得意犹堪夸世俗，诏黄新湿字如鸦。这篇文章主要讲述HTML5 开发APP(打开相册以及图片上传)相关的知识，希望能为你提供帮助。
    我们开发app，常常会遇到让用户上传文件的功能。比如让用户上传头像。我公司的业务要求是让用户上传支付宝收款二维码，来实现用户提现的功能。想要调用相册要靠html Plus来实现。先上效果图

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

文章图片

基本功能是点击按钮就上传图片，然后获取到图片在服务器上的路径。
  首先我们要打开相册，使用gallery模块管理系统相册来打开相册
         
 
mui(\'#shangchuan\')[0].addEventListener(\'tap\',function(){
chooseImg();
})
function chooseImg(){
plus.gallery.pick(
//打开成功的回调函数
function(paths){

},
【HTML5 开发APP(打开相册以及图片上传)】  //打开失败的回调函数
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.上传图片的功能这样就完成了。

    推荐阅读


    上一篇：GetPathFromUri4kitkatAndroid 4.4 kitkat以上及以下根据uri获取路径的方法

    下一篇：android开发之merge结合include优化布局