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

HTML5 开发APP(打开相册以及图片上传)的更多相关文章

  1. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  2. vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...

  3. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  4. mui + H5 调取摄像头和相册 实现图片上传

    最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...

  5. mui开发app之cropper裁剪后上传头像的实现

    在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...

  6. Hbuilder mui 相册拍照图片上传

    http://www.bcty365.com/content-146-3648-1.html 使用流程 弹出actionSheet /*点击头像触发*/ document.getElementById ...

  7. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  8. IOS网络第五天 AFN-02-文件上传,底部弹出窗体,拍照和相册获取图片上传

    ************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...

  9. Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传

    本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...

随机推荐

  1. JDK和Tomcat的简单配置(菜鸟巧记一)

    JDK和Tomcat的配置 1.先好安装JDK 1.1先到oracle官网下载合适自己的JDK 地址http://www.oracle.com/technetwork/java/javase/down ...

  2. 学习maven的各种问题

    1. The container 'Maven Dependencies' references non existing library 解决方法,将eclipse中maven插件中“resolve ...

  3. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

  4. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  5. CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?

    最基本的: 设置display属性为none,或者设置visibility属性为hidden 技巧性: 设置宽高为0,设置透明度为0,设置z-index位置在-1000

  6. 基于Mac制作iPhone铃声教程,iTunes定制铃声

    前言: 网上太多制作方法了,不管是借助第三方软件还是基于iTunes的,不过这些方法都太旧了,有时看起来 ,界面的变化或其他原因,导致很不爽. 正好记录下我最近使用的一种方法: 正文: 一.下载你需要 ...

  7. Kubernetes 设计概要

    英文原文:Kubernetes Design Overview Overview Kubernetes builds on top of Docker to construct a clustered ...

  8. 长沙JavaEE培训机构哪家比较靠谱?Java培训的职业前景

    长沙JavaEE培训机构哪家比较靠谱?可信度高? 全球信息化的时代已经到来,IT行业越来越受大众的欢迎,所以越来越多的人把注意力集中到IT职业教育培训.在软件开发领域,Java培训已经成为人们的首选, ...

  9. Canvas画布实现自定义时钟效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 1.如何使用vbs打开网页并且登陆

    例如自动打开繁星的网页并且登录 Private Sub CommandButton1_Click() Dim ie As Object Set ie = CreateObject("Inte ...