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. 【Unity笔记】常见集合类System.Collections

    ArrayList:长度可变数组,不限定类型 ArrayList al = new ArrayList(); ↓ List:替代ArrayList,限定类型 List list = new List& ...

  2. SQL Server 禁止和启用约束

    Alter Table XXX nocheck constraint xxx Alter Table XXX check constraint xxx

  3. ExtJS获取Grid的行数

    1.     grid.getSelectionModel().getCount() ;  // 获得当前选中的行数  2.     grid.getStore().getTotalCount();  ...

  4. oops_根据epc定位linux_kernel_panic位置

    韩大卫@吉林师范大学 2014.12.10 转载请表明出处 ***************************************************** 关于内核报错 “Unable t ...

  5. Python idle安装与使用教程 调试、下载

    Python idle安装与使用教程 调试.下载 今天我们就来讲一下如何安装Python idle编辑器,也它的调试和使用. 第一步,我们先去下载一个Python idle程序安装包. 本节讲的是wi ...

  6. 使用powerdesinger逆向生成表结构

    (1).使powerdesigner建立和数据库的链接 (2)配置链接详情 (3) (4) (5)更新表结构 (6) (7) 附加:当有时候会报错时: 解决方式: (1.1)更改所连接的数据库 (1. ...

  7. js学习笔记30----对象

    面向对象 对象:是一个整体,对外提供一些操作.JavaScript的所有数据都可以被视为对象.简单说,所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-value)构成. 比如说: var ...

  8. jQuery的发展史，你知道吗？

    2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间).虽然过了这么久,但它依然以其简洁.灵活的编程风格让人一见倾心.在本篇文章中,我们将讲述jQuery的 ...

  9. Windoows窗口程序三

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <windows.h& ...

  10. C++11 新特性：Lambda 表达式

    参考文章:https://blogs.oracle.com/pcarlini/entry/c_1x_tidbits_lambda_expressions 或许,Lambda 表达式算得上是 C++ 1 ...