MUI 图片上传实现
HTML代码
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title>信息修改</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/mui.picker.min.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/personInfor.css" />
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">信息修改</h1>
<a class="mui-icon mui-icon-more mui-icon-right-nav mui-pull-right"></a>
</header>
<div class="mui-content">
<ul class="info_ul">
<li class="portrait_li">
<div class="portrait">
<img id="headImage" style="width: 100%;height: 100%;" src="" onerror="this.src='img/head.png'"/>
</div>
</li>
<li>
<div class="button" onclick="upload(0)">上 传</div>
</li>
<li>
<p>用 户 名</p>
<input type="text" id="userName" placeholder="请输入用户名" />
</li>
<li>
<p class="born">出生日期</p>
<button id='result' data-options='{"type":"date","beginYear":1900,"endYear":2017}' class="btn mui-btn mui-btn-block">选择日期 </button>
</li>
<li class="mui-input-row">
<p>性 别</p>
<span class="radio_inline mui-radio">
<input name="radio" type="radio" id="radio_man" checked value="1">
<label>男</label>
<input name="radio" type="radio" id="radio_woman" value="2">
<label>女</label>
</span>
</li>
<li>
<p>手机号</p>
<input type="text" id="phoneNum" placeholder="请输入手机号" />
</li>
<li>
<p>银行卡号</p>
<input type="text" id="bankNum" placeholder="请输入银行卡号" />
</li>
<li>
<p>银行名称</p>
<input type="text" id="bankName" placeholder="请输入银行名称" />
</li>
<li>
<p>开 户 名</p>
<input type="text" id="accountName" placeholder="请输入开户名" />
</li>
<li>
<p>银行支行</p>
<input type="text" id="bankSub" placeholder="请输入银行支行" />
</li>
<li>
<p>餐饮商名称</p>
<input type="text" id="cateringName" placeholder="请输入餐饮商名称" />
</li>
<li>
<p>营业执照</p>
<div class="file">
<img id="file" style="width:10%;height:10%;" src="" onerror="this.src='img/head.png'"/>
<div class="button" onclick="upload(1)">上 传</div>
</div>
</li>
<li>
<input type="text" id="relativeUrl" /><br />
<input type="text" id="absoluteUrl" />
</li>
</ul>
<button id="btn_confirm" onclick="confirm()">确认修改</button>
</div> <script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/md5.js"></script>
<script src="js/common.js"></script>
<script src="js/personInfo.js"></script>
<script src="js/image.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
</body> </html>
用到的 JS 是 mui.picker.min.js (其他JS为此次项目需要的，无需理会)
JS
var server = "http://192.168.1.149/hq_svn/app_file.php";
var files = document.getElementById('file');
var headImage = document.getElementById('headImage');
//扩展API完成后执行的操作
function plusReady() {
headImage.addEventListener('click', function() {
page.imgUp(0);
});
files.addEventListener('click', function() {
page.imgUp(1);
});
}
//弹出系统按钮选择框
var page = null;
page = {
imgUp: function(num) {
var m = this;
/* console.log(m);*/
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: [{
title: "拍照"
},
{
title: "从相册中选择"
}
]
}, function(e) { //1 是拍照 2 从相册中选择
switch(e.index) {
case 1:
appendByCamera(num);
break;
case 2:
appendByGallery(num);
break;
}
});
}
}
// 上传文件
function upload(num) {
if(num == 0 && headImage.src.indexOf('img/head.png') > -1) {
plus.nativeUI.alert("请添加上传文件！");
return;
}
if(num == 1 && files.src.indexOf('img/head.png') > -1) {
plus.nativeUI.alert("请添加上传文件！");
return;
}
console.log("开始上传：")
var wt = plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload(server, {
method: "POST"
},
function(t, status) { //上传完成
if(status == 200) {
var strData = t.responseText;
if(strData != "") {
var data = strData.split(",");
document.getElementById("relativeUrl").value = (data[0].split(":"))[1];
document.getElementById("absoluteUrl").value = (data[1].split(":"))[1];
plus.nativeUI.alert("上传成功!");
}
wt.close();
} else {
plus.nativeUI.alert("上传失败：" + status);
wt.close();
}
}
);
//添加其他参数
if(num == 0) {
task.addFile(headImage.src, {
key: "file"
});
}
if(num == 1) {
task.addFile(files.src, {
key: "file"
});
}
task.start();
}
// 拍照添加文件
function appendByCamera(num) {
plus.camera.getCamera().captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var path = entry.toLocalURL();
console.log("num:" + num);
if(num == 0) {
console.log("00");
$("#headImage")[0].src = path;
} else {
console.log("11");
$("#file")[0].src = path;
}
}, function(e) {
mui.toast("读取拍照文件错误：" + e.message);
}); });
}
// 从相册添加文件
function appendByGallery(num) {
plus.gallery.pick(function(path) { if(num == 0) {
console.log("000");
$("#headImage")[0].src = path;
} else {
console.log("111");
$("#file")[0].src = path;
}
});
}
//扩展API是否准备好，如果没有准备好则监听plusReady
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
时间比较赶代码有些粗糙，还可以封装的。由于用的是H5+东西要测试需要真机才能运行。
MUI 图片上传实现的更多相关文章
- MUI 图片上传剪切预览，可选（拍照+系统相册）
整合网上的例子..麻蛋.没跑通..没办法.自己就拿他们的例子完善了一下..已经可以使用了! 准备工作: 这几个文件要引入.特别是JS 文件!!! <link href="../css/ ...
- Hbuilder mui 相册拍照图片上传
http://www.bcty365.com/content-146-3648-1.html 使用流程 弹出actionSheet /*点击头像触发*/ document.getElementById ...
- mui + H5 调取摄像头和相册 实现图片上传
最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...
- HTML5 开发APP(打开相册以及图片上传)
我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- webAPP 图片上传
关于webAPP 手机上传 用的vue.js 首先是js代码 调用手机app 的 相册或者自己拍照 upload: function(index) { //上传 this.index = index ...
- 前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
随机推荐
- 【C#学习笔记之一】C#中的关键字
C#中的关键字 关键字是对编译器具有特殊意义的预定义保留标识符.它们不能在程序中用作标识符,除非它们有一个 @ 前缀.例如,@if 是有效的标识符,但 if 不是,因为 if 是关键字. 下面是列出的 ...
- [bzoj1242] Zju1015 Fishing Net弦图判定
弦图判定..MCS算法. 先选一个点,然后每次拿 相邻已选点最多 的未选点. 选完之后判断一下是否是完美消除序列. #include<cstdio> #include<iostrea ...
- angular2 表单验证
模版式表单 (1) angular遇到form自动接管,不想自动接管,添加ngNoForm,当标签为div时,但想被表单接管,添加ngForm; (2) ngForm可以被模版本地变量引用,以便在模版 ...
- Solr6.0与Jetty、Tomcat在Win环境下搭建/部署
摘要: Solr6的新特性包括增强的edismax,对SQL更好的支持--并行SQL.JDBC驱动.更多的SQL语法支持等,并且在Solr6发布以后,Solr5还在持续更新,对于想尝鲜Solr6的用户 ...
- Android开发——BroadcastReceiver广播的使用
想要了解广播定义及相关原理的可以看下这一篇BroadcastReceiver史上最全面解析 简单地对广播进行分类吧,广播有两个角色,一个是广播发送者,另外一个是广播接收者 广播按照类型分为两种,一种是 ...
- php短信接口代码
这篇文章主要为大家详细介绍了php短信接口代码,php短信发送.php批量发送.php获取余额等代码,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了几个常用的php短信接口代码,供大家参考,具体内 ...
- ecshop_添加最新评论
第一步: 在includes/lib_goods.php里面构建自定义函数 代码如下: /** * 获取最近评论 * * @return array */ function get_latest ...
- 谈谈Python、Java与AI
Python好像天生是为AI而生的,随着AI的火热,特别是用Python写的TensorFlow越来越火,Python的热度越来越高,就像当年Java就是随着互联网火起来的感觉.在我的工作中,Pyth ...
- 人人都是CEO
在这个互联网崛起的时代有些流行说法,比如:人人都是产品经理,人人都是程序员以突显行业繁荣的特点,但从更基本的出发点,难道人人不都是 CEO 么?个人的 CEO. 从这个名字套路出发,我沿着想了下去,作 ...
- asp.net -mvc框架复习（2）-创建ASP.NET MVC 第一个程序以及MVC项目文件夹说明
建议vs2013或2013以上版本的vs,要是跨平台的话最好用vs2015或vs2017的asp.net mvc core . 1.创建ASP.NET MVC 第一个程序 打开vs2013->文 ...