<!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. 【C#】重载重写重构

    前言 前几篇博客说了重写和重载.今天主要说重构,顺便比較一下三者. 重构.重写.重载 重构就是通过调整程序代码改善软件的质量.性能,使其程序的设计模式和架构更趋合理.提高软件的扩展性和维护性. 通俗点 ...

  2. PV、UV、GMV

    原文地址:电商术语:客单价.UV.PV.转化率.销售额作者:馨闻莲博 UV(独立访客):Unique Visitor,访问您网站的一台电脑客户端为一个访客.00:00-24:00内相同的客户端只会被计 ...

  3. 推送本地文件夹到github

    1.首先鼠标右键,Git Init Here将文件夹初始化为仓库 2.打开github桌面版 3.点击添加本地仓库 4.填好summary和description并提交 5.push到自己的githu ...

  4. 使用NGINX反向代理做小偷站

    用Nginx的反向代理可以轻松山寨对方的网站,但是反向代理后的网站还是有对方的绝对链接时,怎么办?所以要用替换链接方法. 1 使用官方的的模块 编译参数–with-http_sub_moduleub_ ...

  5. iOS开发多线程篇 10 —NSOperation基本操作

    iOS开发多线程篇—NSOperation基本操作 一.并发数 (1)并发数:同时执⾏行的任务数.比如,同时开3个线程执行3个任务,并发数就是3 (2)最大并发数:同一时间最多只能执行的任务的个数. ...

  6. JME的flyCam和cam的区别

    http://hub.jmonkeyengine.org/wiki/doku.php/jme3:advanced:camera 注意这句话: The flyCam class field gives ...

  7. 基于AFNetworking的网络判断【原创】

    首先导入AFNetworking第三方框架,然后将下面的.h和.m放在你新建的类中便可 GGNetworkJudge.h   在最后会有Singleton.h头文件代码 #import <Fou ...

  8. 红外图像处理之直方图均衡的matlab源码与效果验证

    红外图像是热辐射成像,由于场景中的目标与背景的温差相对较小,红外图像的动态范围大.对比度 低, 信噪比也较可见光图像的低.为了能够从红外图像中正确地识别出目标,必须对红外图像进行增强处理.一般红外探测 ...

  9. poj 2195(KM求最小权匹配)

    题目链接:http://poj.org/problem?id=2195 思路:我们都知道KM使用来求最大权匹配的,但如果要求最小权匹配,只需把图中的权值改为负值,求一次KM,然后权值和取反即可. ht ...

  10. Java基础教程笔记

    第一部分——java基础程序设计 一:java语言特色 1:语言有点:“一次编写,到处运行” 2:相对于C++A:提供了对内存的自动管理:B:去除了C++语言中的“指针”:C:避免了赋值语句(如a=3 ...