HTML5 开发APP(打开相册以及图片上传)
我们开发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(打开相册以及图片上传)的更多相关文章
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- mui + H5 调取摄像头和相册 实现图片上传
最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...
- mui开发app之cropper裁剪后上传头像的实现
在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...
- Hbuilder mui 相册拍照图片上传
http://www.bcty365.com/content-146-3648-1.html 使用流程 弹出actionSheet /*点击头像触发*/ document.getElementById ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- IOS网络第五天 AFN-02-文件上传,底部弹出窗体,拍照和相册获取图片上传
************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...
- Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传
本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...
随机推荐
- JDK和Tomcat的简单配置(菜鸟巧记一)
JDK和Tomcat的配置 1.先好安装JDK 1.1先到oracle官网下载合适自己的JDK 地址http://www.oracle.com/technetwork/java/javase/down ...
- 学习maven的各种问题
1. The container 'Maven Dependencies' references non existing library 解决方法,将eclipse中maven插件中“resolve ...
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
- 出位的template.js 基于jquery的模板渲染插件
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?
最基本的: 设置display属性为none,或者设置visibility属性为hidden 技巧性: 设置宽高为0,设置透明度为0,设置z-index位置在-1000
- 基于Mac制作iPhone铃声教程,iTunes定制铃声
前言: 网上太多制作方法了,不管是借助第三方软件还是基于iTunes的,不过这些方法都太旧了,有时看起来 ,界面的变化或其他原因,导致很不爽. 正好记录下我最近使用的一种方法: 正文: 一.下载你需要 ...
- Kubernetes 设计概要
英文原文:Kubernetes Design Overview Overview Kubernetes builds on top of Docker to construct a clustered ...
- 长沙JavaEE培训机构哪家比较靠谱?Java培训的职业前景
长沙JavaEE培训机构哪家比较靠谱?可信度高? 全球信息化的时代已经到来,IT行业越来越受大众的欢迎,所以越来越多的人把注意力集中到IT职业教育培训.在软件开发领域,Java培训已经成为人们的首选, ...
- Canvas画布实现自定义时钟效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 1.如何使用vbs打开网页并且登陆
例如自动打开繁星的网页并且登录 Private Sub CommandButton1_Click() Dim ie As Object Set ie = CreateObject("Inte ...