zoukankan      html  css  js  c++  java
  • MUI 单图片压缩上传(拍照+系统相册): 选择立即上传

    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);
    
    
     ?>

     测试结果如图:

  • 相关阅读:
    CTFHub-Web-Web前置技能-HTTP协议-响应包源代码详解
    BurpSuite环境安装及设置
    i2 Analyst’s Notebook 9学习笔记之入门、基本概念和数据接口
    Python 练习题:用索引取出LIST中的值
    python 练习题:小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点
    zabbix4.0 本地安装详解及步骤
    CentOS 7 安装 mysql 5.7.27 for zabbix
    win7系统 右击任务栏 资源管理器 弹出菜单“已固定”和“最近”项目不显示故障处理
    CentOS 7 新系统 手动配置网络 简要步骤
    CentOS7 firewalld防火墙 启动 关闭 禁用 添加删除规则等 常用命令
  • 原文地址:https://www.cnblogs.com/richerdyoung/p/6610783.html
Copyright © 2011-2022 走看看