<!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上传图片的更多相关文章

  1. MUI上传图片之选择相册和相机上传

    1.因为项目中有三处地方需要上传,所以html中存在三处地方.身份证正反面为上传一张,发票限制上传9张. <div class="action1"> <!--展示 ...

  2. Html5+Mui前端框架,开发记录（三）：七牛云 上传图片

    1.Html界面: <div id="container"> <label>凭证:</label> <div id="uploa ...

  3. mui 时间选择器和上传图片

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name= ...

  4. mui H5+ 调取 相册 拍照 功能 上传图片 + 裁剪功能

    H5+ 相册拍照图片上传 点击用户头像后,弹出actionSheet,选择从相册或是拍照:选取照片后调用上传方法: 上传图片后调用PhotoClip.js  插件进行裁剪 具体流程 弹出actionS ...

  5. Dcloud+mui 压缩上传图片到服务器

    chooseImgFromAlbums选择图片 chooseImgFromPictures 拍照 changeToLocalUrl 转换成可用的路径 uploadpic.compressImg 压缩图 ...

  6. mui开发app之多图压缩与上传（仿qq空间说说发表）

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

  7. MUI如何调取相册的方法

    第一种是HTML方法 <label> <input style="opacity: 0;" type="file" accept=" ...

  8. ThinkPHP5上传图片并压缩为缩略图

    使用thinkphp开发app后端中,需要实现一个处理上传图片队列的功能 这是个上传多图片保存并且需要对其中一张图片进行压缩的功能 (使用的html5 mui框架开发app,如果直接载入原图,app客 ...

  9. mui 常见的效果

    上传图片,预览图片: <!--upload--> <div id="feedback" class="mui-page feedback"&g ...

随机推荐

  1. Python MQTT客户端实现

    1.安装paho-mqtt 使用Python Package Index (PyPi) pip install paho-mqtt 使用virtualenv virtualenv paho-mqtt ...

  2. Java中几种常见的NPE问题

    1.Map下的NPE 直接上代码: Map类集合K/V能不能存储null值的情况,如下表格: 2.foreach遍历集合删除元素 在遍历集合时对元素进行add/remove操作要使用Iterator, ...

  3. [ci]持续集成系列

    持续集成一直很蛋疼,感觉没底. 几个方面来写 1,搭建gitlab 配邮箱 域名等使之好用 2,搭建jenkins –yum,安装常见插件 3,搭建sonar,汉化 4,安装sonar-scanner ...

  4. SpringMVC学习（一）小demo

    首先看一下整个demo的项目结构: 第一步是导入Spring MVC单独使用时的最少jar包: 第二步在项目的web.xml中配置Spring MVC提供的拦截请求的Servlet: 全类名是:org ...

  5. CI框架基本配置/教你学习CI框架codelgniter

    CI框架现在中国可以说还是不成熟,不像thinkphp那样有那么多的中文手册,在国内,很多国人英语都很烂,CI现在教程还是不多.大家心里都存在这严重想法 CI 框架现在中国可以说还是不成熟,不像thi ...

  6. UVA 1363 Joseph's Problem 找规律+推导 给定n,k;求k%[1,n]的和。

    /** 题目:Joseph's Problem 链接:https://vjudge.net/problem/UVA-1363 题意:给定n,k;求k%[1,n]的和. 思路: 没想出来,看了lrj的想 ...

  7. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  8. Servlet 点击计数器

    网页点击计数器 很多时候,您可能有兴趣知道网站的某个特定页面上的总点击量.使用 Servlet 来计算这些点击量是非常简单的,因为一个 Servlet 的生命周期是由它运行所在的容器控制的. 以下是实 ...

  9. spring 整合mybatis 学习笔记

    1.1 环境准备 java环境: jdk1.7.0_72 eclipse indigo springmvc版本:spring3.2  所需要的jar包: 数据库驱动包:mysql5.1 mybatis ...

  10. 读汤姆大叔《深入理解javascript系列》笔记一编写高质量代码

    感觉大叔的博文真的是很不错 我打算严格要求自己 按照大叔说的,这样我就会更有规范,更有思想的去工作 去写代码(一入代码深似海)   1,尽可能的少用全局变量(污染全局空间,也会和别人的代码 发生冲突造 ...