mui上传图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css"> img{
width: 100px;
height: 100px;
border-radius: 50px;
display: block;
margin: 30px auto;
}
#btn{
display: block;
margin: 30px auto;
}
</style>
</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>
</header>
<div class="mui-content">
<img src="img/yt.jpg" id="img1"/> <!--<input type="button" id="btn" value="change" />-->
<button id="btn">change</button>
</div> </body>
<script src="js/castapp.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
ca.init(); var oB = ca.id("btn");
var oi = ca.id("img1");
ca.click(oB,function(){
var arr = ['照相机','相册']; castapp.actionSheet(arr,{
succFn:function(data){
//手机上的图片路径
// alert(data);
//上传后的图片路径
// alert('http://peipao.dongyixueyuan.com/'+data);
console.log('http://peipao.dongyixueyuan.com'+data);
oi.src='http://peipao.dongyixueyuan.com'+data;
},
errFn:function(data){
alert(data);
},
//是否开启上传
isUpload:true,
//上传地址
uploadUrl:'http://peipao.dongyixueyuan.com/upload_file.php', })
}) </script>
</html>
mui上传图片的更多相关文章
- MUI上传图片之选择相册和相机上传
1.因为项目中有三处地方需要上传,所以html中存在三处地方.身份证正反面为上传一张,发票限制上传9张. <div class="action1"> <!--展示 ...
- Html5+Mui前端框架,开发记录（三）：七牛云 上传图片
1.Html界面: <div id="container"> <label>凭证:</label> <div id="uploa ...
- mui 时间选择器和上传图片
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name= ...
- mui H5+ 调取 相册 拍照 功能 上传图片 + 裁剪功能
H5+ 相册拍照图片上传 点击用户头像后,弹出actionSheet,选择从相册或是拍照:选取照片后调用上传方法: 上传图片后调用PhotoClip.js 插件进行裁剪 具体流程 弹出actionS ...
- Dcloud+mui 压缩上传图片到服务器
chooseImgFromAlbums选择图片 chooseImgFromPictures 拍照 changeToLocalUrl 转换成可用的路径 uploadpic.compressImg 压缩图 ...
- mui开发app之多图压缩与上传（仿qq空间说说发表）
欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
- MUI如何调取相册的方法
第一种是HTML方法 <label> <input style="opacity: 0;" type="file" accept=" ...
- ThinkPHP5上传图片并压缩为缩略图
使用thinkphp开发app后端中,需要实现一个处理上传图片队列的功能 这是个上传多图片保存并且需要对其中一张图片进行压缩的功能 (使用的html5 mui框架开发app,如果直接载入原图,app客 ...
- mui 常见的效果
上传图片,预览图片: <!--upload--> <div id="feedback" class="mui-page feedback"&g ...
随机推荐
- table行编辑
一个简单的Demo <html> <head> <title>Table Test Demo</title> <style> .view_t ...
- spring security 3.1 实现权限控制
spring security 3.1 实现权限控制 简单介绍:spring security 实现的权限控制,能够分别保护后台方法的管理,url连接訪问的控制,以及页面元素的权限控制等, secur ...
- Linux下查看硬件信息的方法
用硬件检测程序kuduz探测新硬件:service kudzu start ( or restart) 查看CPU信息:cat /proc/cpuinfo 查看板卡信息:cat /proc/pci 查 ...
- 也许，这样理解HTTPS更容易_转载
转自:也许,这样理解HTTPS更容易 原文衔接:https://showme.codes/2017-02-20/understand-https/ 作者:翟志军 摘要 本文尝试一步步还原HTTPS的 ...
- Python os._exit() sys.exit() exit()区别
Python退出程序的方式有两种:os._exit(), sys.exit() 1)os._exit() 直接退出 Python程序,其后的代码也不会继续执行. 2)sys.exit() 引发一个 S ...
- 22lvs 健康节点检查
[root@lb03 scripts]# cat lvm_health_check.sh #!/bin/bash web_ip=( 10.0.0.17 10.0.0.18 ) # 检查恢复就添加节点 ...
- ThinkPHP -- 问题
@.nginx下,找不到页面,如果然nginx支持pathinfo模式 原文:http://www.leixuesong.cn/1418 把文章的配置拷贝了下.
- Xcode中授权普通成员
问题: 在普通用户账户下使用系统的Xcode在编译通过时候会提示” Developer Tools Access“需控制另一进程,需要输入“Developer Tools”组用户名密码才能继续调试 解 ...
- 访问 JavaBean 对象的属性
在 <jsp:useBean> 标签主体中使用 <jsp:getProperty/> 标签来调用 getter 方法,使用 <jsp:setProperty/> 标 ...
- windows中控制台窗口和普通窗口有什么区别?
1. 窗口都是windows标准窗口,有窗口句柄,但是console window没有消息循环,直接从缓冲区读数据,显示数据. windows中普通窗口都有自己的窗口过程, 我可以使用SetWindo ...