1 html部分

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link href="../css/mui.min.css" rel="stylesheet" />

        <script src="../js/mui.min.js"></script>  

        <script src="../js/jquery-1.9.min.js"></script>

        <style>

            .imageup{ width:100px; height: 36px; line-height:36px;}

            .button{  width:100px; height: 50px; line-height:50px;}

        </style>

    </head>

    <body>

        <img id="headimg" src=''  height="150"  width="150">

        <p><a href="javascript:;" class="imageup">上传图片</a> </p>

        <p><button onclick="upload();" class='button'> 提交</button></p>

        <script>  

            function plusReady(){

                // 弹出系统选择按钮框

                mui("body").on("tap",".imageup",function(){

                    page.imgUp();

                })  

            }

            var page=null;

            page={

                imgUp:function(){

                    var m=this;

                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[

                        {title:"拍照"},

                        {title:"从相册中选择"}

                    ]}, function(e){//1 是拍照  2 从相册中选择

                        switch(e.index){

                            case 1:appendByCamera();break;

                            case 2:appendByGallery();break;

                        }

                    });

                }

                //摄像头

            }  

            // 拍照添加文件

            function appendByCamera(){

                plus.camera.getCamera().captureImage(function(e){

                    console.log(e);

                    plus.io.resolveLocalFileSystemURL(e, function(entry) {

                    var path = entry.toLocalURL();

                    document.getElementById("headimg").src = path;

                    //就是这里www.bcty365.com

                    }, function(e) {

                        mui.toast("读取拍照文件错误：" + e.message);

                    }); 

                });

            }

            // 从相册添加文件

            function appendByGallery(){

                plus.gallery.pick(function(path){

                    document.getElementById("headimg").src = path; 

                });

            }

            //服务端接口路径

            var server = "http://www.test.cn/aaa.php";

            //获取图片元素

            var files = document.getElementById('headimg');

            // 上传文件

            function upload(){

                console.log(files.src);

                var wt=plus.nativeUI.showWaiting();

                var task=plus.uploader.createUpload(server,

                    {method:"POST"},

                    function(t,status){ //上传完成

                        if(status==200){

                            alert("上传成功："+t.responseText);

                            wt.close(); //关闭等待提示按钮

                        }else{

                            alert("上传失败："+status);

                            wt.close();//关闭等待提示按钮

                        }

                    }

                );

                //添加其他参数

                task.addData("name","test");

                task.addFile(files.src,{key:"dddd"});

                task.start();

            }

            if(window.plus){

                plusReady();

            }else{

                document.addEventListener("plusready",plusReady,false);

            }       

        </script>

    </body>

</html>

2 PHP部分：

<?php 

echo "<pre>";

print_r($_POST);

print_r($_FILES);

 ?>

3 操作步骤：

上传图片-》选择拍照还是系统相册-》提交

近期有很多童鞋在做的时候遇到好多问题。在此提示你一下

1 新建APP项目。hello 5+

2  注意引入 mui.min.js和 jq ,新建这个app项目里是没有的。你需要在MUI里边复制过来。

3 最后修改 服务端提交路径。就可以测试了，

MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交的更多相关文章

  1. MUI 单图片压缩上传（拍照+系统相册）： 选择立即上传

    1 html 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. swift -从相册中选择照片并上传

    选择本地图片并上传是应用开发中一个比较常见的功能.        原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/det ...

  3. MUI 图片上传剪切预览，可选（拍照+系统相册）

    整合网上的例子..麻蛋.没跑通..没办法.自己就拿他们的例子完善了一下..已经可以使用了! 准备工作: 这几个文件要引入.特别是JS 文件!!! <link href="../css/ ...

  4. MUI(拍照+系统相册)图片上传剪切预览

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 从系统相册中选择GIF图片上传到服务器

    -(void)assetPickerController:(ZYQAssetPickerController *)picker didFinishPickingAssets:(NSArray *)as ...

  6. vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：

    //预览<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-sh ...

  7. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  8. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  9. 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切

    之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...

随机推荐

  1. DHCP服务器-DNS服务器-Samba服务器

    DHCP服务器 DHCP在管理网络配置方面很有作用,特别是一个当一个网络的规模较大时,使用DHCP可极大的减少 管理员的工作量. DHCP分为两部分:服务端和客户端.服务端负责集中管理可动态分配的IP ...

  2. 最大似然估计 （MLE）与 最大后验概率（MAP）在机器学习中的应用

    最大似然估计 MLE 给定一堆数据,假如我们知道它是从某一种分布中随机取出来的,可是我们并不知道这个分布具体的参,即“模型已定,参数未知”. 例如,对于线性回归,我们假定样本是服从正态分布,但是不知道 ...

  3. 如何对抗、预防 SQL注入 攻击

    一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...

  4. ViZDoom安装

    官网:https://github.com/mwydmuch/ViZDoom/blob/master/doc/Building.md 环境:ubuntu16, python2.7, Anaconda2 ...

  5. getaddrinfo ENOTFOUND https://api.weixin.qq.com https://api.weixin.qq.com:443

    原因:这是由于你当前的主机不能够连接到你填写的url. 解决方法: 先ping api.weixin.qq.com ping不通的话,就是外网访问的问题. 开通外网访问就可以了.

  6. 调用ffmpeg库编译时出现common.h:175:47: error: 'UINT64_C' was not declared in this scope

    解决办法 出现错误:jni/ffmpeg/libavutil/common.h:175:47: error: 'UINT64_C' was not declared in this scope 解决: ...

  7. Java 的JSON、XML转换方法——目录索引(转)

    JSON及XML的Java序列化.反序列化(转换)在WebService.Ajax数据传递中,用得比较多.如:在用ExtJS.jQuery.mootools以及一些WebService时,你可以需要用 ...

  8. CentOS 7拨号上网（ADSL & PPPoE）

    步骤概述: 1.搜寻PPPoE相关软件,本人使用的是rp-pppoe yum search pppoe 2.使用yum安装rp-pppoe yum install rp-pppoe -y 3.开始配置 ...

  9. Python的可变对象与不可变对象。

    参考:http://thomaschen2011.iteye.com/blog/1441254          Python基础:Python可变对象和不可变对象 http://blog.jobbo ...

  10. 对phpexcel的若干补充

    导出excel属性设置 //Include class require_once('Classes/PHPExcel.php'); require_once('Classes/PHPExcel/Wri ...