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. JavaScrip——对话框的简单应用（判断isNaN）

    综合运用 isNaN的用法:判断是不是一个合法的数字类型,是数字返回false,不是返回true 1.我们用prompt来接收输入的内容 2.通过isNaN来做判断 3.最后用alert输出结果 &l ...

  2. ubuntu开启sshd服务（转）

    SSH分客户端openssh-client和openssh-server如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则sudo apt-ge ...

  3. Laravel Debugbar

    Installation Require this package with composer: composer require barryvdh/laravel-debugbar After up ...

  4. AWS SDK for C++调用第三方S3 API

    这里介绍AWS SDK for C++ 1.0.x版本,比如下载: https://github.com/aws/aws-sdk-cpp/archive/1.0.164.tar.gz 环境:RHEL/ ...

  5. Storm ack和fail机制再论

    转自:http://www.cnblogs.com/fxjwind/p/3806404.html 之前对这个的理解有些问题,今天用到有仔细梳理了一遍,记录一下 首先开启storm tracker机制的 ...

  6. PhoneGap开发不可或缺的五件装备

    PhoneGap是一种介于WebApp和NativeApp之间的解决方案,它为每种移动客户端提供一个Native的壳,这种壳里边包着一个Web应 用.借助于壳,Web应用可以被安装,可以被发布到各大市 ...

  7. 结构型模式概述（Structural Pattern)

    结构型模式可以描述两种不同的东西:类与类的实例.结构型模式可以分为类结构型模式和对象结构型模式. 类结构型模式关心类的组合,可以由多个类组合成一个更大的系统,在类结构型模式中只存在继承关系和实现关系: ...

  8. VCL 中的 Windows API 函数(6): BeginDeferWindowPos

    BeginDeferWindowPos 和 DeferWindowPos.EndDeferWindowPos 是一组一起使用的函数, 可对一组窗口的位置.大小.Z 序等进行调整, 在 ExtCtrls ...

  9. JS中函数声明与函数表达式的异同

    相同点 注:函数声明和函数表达式的相同点包括但不限于以下几点 函数是一个值,所以和其他值一样,函数也可以进行被输出.被赋值.作为参数传给其他函数等相关操作,不管函数是以什么方式被定义的,当然和其他值的 ...

  10. JQuery 选择器 xpath 语法应用

    比如下面html代码 <ul> <li class="aaaa" title="ttt">li-1</li> <li ...