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. Apache HttpComponents 多线程处理HTTP请求

    /* * ==================================================================== * * Licensed to the Apache ...

  2. nfs简述

    参考:http://www.51lun-wen.cn/shenghuo/dianniaowangluo/diannaowangluo/czxt/Linux/200810/354248.html 1.什 ...

  3. mkyaffs2image编译

    http://blog.chinaunix.net/uid-26009923-id-3760474.htmlhttp://blog.csdn.net/xingtian19880101/article/ ...

  4. eclipse中maven打包

    第一种方式:将依赖包打包进一个jar包中. <build> <plugins> <plugin> <artifactId>maven-compiler- ...

  5. Qt Quick的国际化和本地化

    国际化您的应用程序 以下部分描述了国际化QML源代码的各个方面.如果您对应用程序中的所有用户界面组件都遵循这些指南,则可以针对不同语言和本地文化约定(例如日期和数字的格式化方式)本地化应用程序的各个方 ...

  6. LINQ操作符四：排序操作符

    Linq中的排序操作符包括OrderBy.OrderByDescending.ThenBy.ThenByDescending和Reverse,提供了升序或者降序排序. 一.OrderBy操作符 Ord ...

  7. Droptiles - 炫酷的 Metro 风格的层叠式 Web 面板

    介绍 Droptiles是一套Metro风格的类似Win8的Web2.0控制面板.它采用图块(tiles)建立用户体验.图块(tiles)是一些可以从外部资源中获取数据的迷你应用.点击图块(tile) ...

  8. 关于Cocos2d-x的瓦片地图

    1.cocos2d-x的瓦片地图是用Tiled地图编辑器做的,这个软件开源,免费,一般都是用它制作瓦片地图. 2.瓦片地图是由块层和对象组成的,块层的作用是显示和一些重叠的时候覆盖角色的作用,而对象是 ...

  9. 用python批量执行VBA代码

    先说下背景环境 1. 公司需要问卷调查,有两份问卷, 1)是spss问卷,2)是excel问卷.spss问卷数据不全,但有各种标签, excel呢, 生成的数据直接把选项变成了值 2. 现在需要把ex ...

  10. e662. 取的图像的色彩模型

    // This method returns the color model of an image public static ColorModel getColorModel(Image imag ...