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

 ?>

测试结果如图:

时间: 2024-11-11 01:25:07

MUI 单图片压缩上传(拍照+系统相册)的相关文章

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

android图片压缩上传系列-service篇

本篇文章是继续上篇android图片压缩上传系列-基础篇文章的续篇.主要目的是:通过Service来执行图片压缩任务来讨论如何使用Service,如何处理任务量大的并发问题. 了解下Service 大家都知道如果有费时任务,这时需要将任务放到后台线程中执行,如果对操作的结果需要通过ui展示还需要在任务完成后通知前台更新.当然对于这种情况,大家也可以在Activity中启动线程,在线程中通过Handler和sendMessage来通知Activity并执行更新ui的操作,但是更好的方法是将这些操作

基于H5+ API手机相册图片压缩上传

// 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象 有 width, height, quality(0-1) * @param {Object} callback * 回调函数有一个参数,base64的字符串数据 */ App.prototype.dealImage

Html5+asp.net mvc 图片压缩上传

在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 废话不多少不多说直接看代码: 本次测试使用了 zepto.min.js 插件,更新版本的下载请点击这里 主要js代码: //图片压缩处理 ; (function () { /** * 加载的时候进行抽样检测 * 在iOS中,大于2M的图片会抽样渲染 */ func

ebay商品基本属性组合成数据表格式,可用上传到系统递交数据

该刊登表设计是利用VB写的,当时因为两个系统的数据不能直接对接,又copy并且组合SKU,一个表格一个表格填写,比较麻烦,还好刊登系统可以允许用excel表格上传数据 所以就下好模板,学了VB语言,在业余的时候做了这个数据自动组合功能用刊登数据广告. 另外也使用VB写了一个excel表格几千行数据的处理(这个另做解释) *****************************************************************************************

将android客户端的错误日志压缩上传到服务器

原文:将android客户端的错误日志压缩上传到服务器 源代码下载地址:http://www.zuidaima.com/share/1550463760370688.htm

前端图片压缩上传(纯js的质量压缩,非大小压缩)

此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> /* 三个参数 file:一个是文件(

springMVC多图片压缩上传的实现

前台代码: <form id="userForm" method="post" enctype="multipart/form-data"> <div> <label class="my_input_title">图片1:</label> <input type="file" name="file" class=""

HTML5 图片本地压缩上传插件

======================前端代码========================= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>localResizeIMG</title> <!--引入JQuery 用于异步上传图片--> <script type="text/javascript"