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. MySQL基本命令和操作

    开启和关闭mysql服务 Windows下开启和关闭mysql服务 net start mysql # 开启mysql服务 net stop mysql # 关闭mysql服务 没有重启mysql服务 ...

  2. 打开wps的宏设置，提示你可能没有装vba

    打开wps的宏设置,提示你可能没有装vba?? 因为wps个人版没有vba,安装以下软件即可,亲测可行 VBA6.3提取自WPS2012专业增强版.zip   链接: http://pan.baidu ...

  3. hdu6199 gems gems gems dp+博弈

    /** 2017 ACM/ICPC Asia Regional Shenyang Online 解题报告 题目:hdu6199 gems gems gems 链接:http://acm.hdu.edu ...

  4. Axel 快速下载

    Axel 是一个轻量级下载程序,它和其他加速器一样,对同一个文件建立多个连接,每个连接下载单独的文件片段以更快地完成下载. Axel 支持 HTTP.HTTPS.FTP 和 FTPS 协议.它也可以使 ...

  5. 几个Tab，滑动门，选项卡，图片切换

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. 初识EseNt

    转自:http://www.cnblogs.com/goosao/archive/2011/09/23/2186412.html 一.什么是EseNtEseNt(Extensible Storage ...

  7. (转)非阻塞Connect对于select时应注意问题

    对于面向连接的socket类型(SOCK_STREAM,SOCK_SEQPACKET)在读写数据之前必须建立连接,首先服务器端socket必须在一个客户端知道的地址进行监听,也就是创建socket之后 ...

  8. jquery 中json数组的操作(转）

    在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...

  9. python 脚本检测python 版本

    通过sys 模块的sys_info可以返回当前python 的版本信息, 其返回值是一个元组, 比如(2, 6, 6, 'final', 0); 表示当前版本为2.6.6 , 我们可以利用这个变量的值 ...

  10. 解决RaycastTarget勾选过多的烦恼

    看过UGUI源码的朋友一定都知道,UI事件会在EventSystem在Update的Process触发.UGUI会遍历屏幕中所有RaycastTarget是true的UI,接着就会发射线,并且排序找到 ...