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{ position: absolute; margin:auto;left:0px;top:0;right:0;bottom:0; width:100px; height: 36px;}

        </style>

    </head>

    <body>

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

        <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:clickCamera();break;

                            case 2:clickGallery();break;

                        }

                    });

                }

                //摄像头

            }  

     //发送照片

    function clickGallery() {

        plus.gallery.pick(function(path) {

            plus.zip.compressImage({

                src: path,

                dst: "_doc/chat/gallery/" + path,

                quality: 20,

                overwrite: true

            }, function(e) {

                //服务端接口路径

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

                //打开等待旋转提示按钮

                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.addFile(e.target, {});

                //添加其他参数

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

                task.start();

            }, function(err) {

                console.error("压缩失败：" + err.message);

            });  

        }, function(err) {});

    };  

    // 拍照

    function clickCamera() {

        var cmr = plus.camera.getCamera();

        var res = cmr.supportedImageResolutions[0];

        var fmt = cmr.supportedImageFormats[0];

        cmr.captureImage(function(path) {  

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

                var localUrl = entry.toLocalURL();

                plus.zip.compressImage({

                    src: localUrl,

                    dst: "_doc/chat/camera/" + localUrl,

                    quality: 20,

                    overwrite: true

                }, function(e) {

                    //服务端接口路径

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

                    //打开等待旋转提示按钮

                    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.addFile(e.target, {});

                    //添加其他参数

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

                    task.start();

                }, function(err) {

                    console.log("压缩失败：  " + err.message);

                });

            });

        }, function(err) {

            console.error("拍照失败：" + err.message);

        }, {

            index: 1

        });

    };  

     if(window.plus){

        plusReady();

    }else{

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

    }       

        </script>

    </body>

</html>

2 服务端文件（PHP）

<?php 

echo "<pre>";

print_r($_POST);

print_r($_FILES);

 ?>

测试结果如图：

MUI 单图片压缩上传（拍照+系统相册）： 选择立即上传的更多相关文章

  1. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  2. 调用原生硬件 Api 实现照相机 拍照和相册选择 以及拍照上传

    一.Flutter image_picker 实现相机拍照和相册选择   https://pub.dev/packages/image_picker   二.Flutter 上传图片到服务器   ht ...

  3. MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交

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

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

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

  5. IOS网络第五天 AFN-02-文件上传，底部弹出窗体，拍照和相册获取图片上传

    ************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...

  6. Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

    本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...

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

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

  8. iOS之设置头像（访问系统相册、本地上传）

    1. UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:                               ...

  9. Android 拍照或相册选择照片进行显示缩放位图 Demo

    拍照后直接使用 BitmapFactory.decodeStream(...) 进行创建 Bitmap 并显示是有问题的. Bitmap 是个简单对象,它只存储实际像素数据,也就是说,即使原始照片已压 ...

随机推荐

  1. C语言 · 判定字符位置

    算法训练 6-3判定字符位置   时间限制:1.0s   内存限制:512.0MB      返回给定字符串s中元音字母的首次出现位置.英语元音字母只有‘a’.‘e’.‘i’.‘o’.‘u’五个. 若 ...

  2. Linux 网络子系统之NAPI书签

    只是一个书签 http://blog.csdn.net/ustc_dylan/article/details/6116334

  3. Hive Tuning（一） 连接策略

    群里共享了一本hive调优的书记,名叫<Hive Tunning>,就忍不住开始看了,也顺便记录一下自己学到的东西,备忘! 首先,这是hive的数据摘要,别问我什么意思,我也没看懂. 好, ...

  4. 深入理解MongoDB的复合索引

    更新时间:2018年03月26日 10:17:37   作者:Fundebug    我要评论 对于MongoDB的多键查询,创建复合索引可以有效提高性能.这篇文章主要给大家介绍了关于MongoDB复 ...

  5. Framework 7 之 给Picker Modal 添加半透明背景

    官网的效果图如下: 效果图如下: 我们需要在显示下面浮层的时候显示后面的半透明背景,Framework 7 里面默认有个半透明背景,如下图: 解决方案: 1.在</body>标签之前添加& ...

  6. Windoows窗口程序一

    编写窗口程序的步骤: .定义WinMain入口函数 .定义窗口处理函数(处理消息)WindowProc .注册窗口类RegisterClass .创建窗口(在内存中创建窗口)CreateWindow ...

  7. Geometric deep learning on graphs and manifolds using mixture model CNNs

    Monti, Federico, et al. "Geometric deep learning on graphs and manifolds using mixture model CN ...

  8. ubuntu 16.04 安装pycharm

    Ubuntu16.04下安装Cuda8.0+Caffe+TensorFlow-gpu+Pycharm过程(Simple) ubuntu 16.04 安装pycharm 1.安装java  jdk 直接 ...

  9. delegate、Func、Action几个常用手法

    委托是我们C#开发当中使用频率非常的高一个手段,好处我就不列举了. 委托早期版本中只有delegate,后期版本有了Func(有返回值)和Action(无返回值)两委托方法. 我这里将列举它们三个常用 ...

  10. CentOS下yum安装PHP，配置php-fpm服务

    yum list installed | grep php 先删除已有的php版本 ,执行下面的命令删除php yum remove php-common 然后像安装那样问你是否继续的,输入yes即可 ...