mui实现压缩手机本地图片并上传

最新推荐文章于 2022-04-16 17:43:52 发布

原创最新推荐文章于 2022-04-16 17:43:52 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何利用mui的upload.js组件，实现对手机本地图片的压缩处理，并完成图片的上传操作，适用于移动端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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.8.3.min.js"></script>  
        <style>  
            .imageup{ width:100px; height: 36px; line-height:36px;}  
            .button{  width:100px; height: 50px; line-height:50px;}  
        </style>  
    </head>  
    <body> 
    	<div align="center" style="margin-top: 80px;">
    		<img id="uploadImg" src='images/60x60.gif'  height="800px"  width="800px">
    		<br /><br />
            <h3><a href="javascript:;" class="mui-upload">上传图片</a></h3>
            <br /><br />
            <button onclick="UploadImages();" class='mui-btn-primary' style="width: 80px;">提交</button>
            &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="Refresh();" class='mui-btn-primary' style="width: 80px;">刷新</button>
            &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="getLocation();" class='mui-btn-primary' style="width: 80px;">定位</button>
    	</div>
        
        <script src="js/mui.upload.js"></script>
        <script>
        	function Refresh(){
        		document.getElementById("uploadImg").src = 'images/60x60.gif';
        	}
        	function getLocation(){
        		getposition();
        	}	
        </script>
    </body>   
</html>

mui.upload.js

			function plusReady(){  
			    // 弹出系统选择按钮框  
			    mui("body").on("tap",".mui-upload",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:appendByCamera();break;  
                            case 2:appendByGallery();break;  
                        }  
                    });  
                }  
                //摄像头  
            }  
              
            // 拍照添加文件
            function appendByCamera(){
                plus.camera.getCamera().captureImage(function(e){
                    console.log(e);
                    plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                    var path = entry.toLocalURL(); /*+ "?version=" + new Date().getTime();*/ 
                    console.log(path);
                    alert(path);
                    document.getElementById("uploadImg").src = path; 
                    //就是这里www.bcty365.com 
                    }, function(e) { 
                        mui.toast("读取拍照文件错误：" + e.message); 
                    }); 
    
                });    
            }
            // 从相册添加文件
            function appendByGallery(){
                plus.gallery.pick(function(path){
                    document.getElementById("uploadImg").src = path; 

                });
               /* plus.gallery.pick( function(e){
                	var fileSrc;
			    	for(var i in e.files){
				    	fileSrc= e.files[0];
			            // 其他操作,比如预览展示
			            document.getElementById("uploadImg").src = fileSrc; 
			    	}
			    }, function ( e ) {
			    	console.log( "取消选择图片" );
			    },{
			    	filter: "image",
			    	multiple: true,
			    	maximum: 5,
			    	system: false,
			    	onmaxed: function() {
			    		plus.nativeUI.alert('最多只能选择5张图片');
			    	}
			    });*/
            }
            
              
            //服务端接口路径
            var server = "http://xxx/UploadImage/uploadimage.html";
            //获取图片元素
            var files = document.getElementById('uploadImg');
            // 上传文件
            function UploadImages(){
                console.log("上传图片本地路径为："+files.src);
                
                //压缩图片
                var filepath = files.src;
                plus.zip.compressImage({			
	           		src: filepath,			
	           		dst: '_doc/zip_'+filepath.substr(filepath.lastIndexOf('/') + 1),			
	           		quality: 50,//质量1-100	
	           		overwrite: true,
	           		width:"50%",//缩小到原来的一半			
	           		height:"50%"//缩小到原来的一半		
           		},
           		function(event) {						
           			console.log("<=====压缩文件路径=====>"+event.target);			
           			console.log("<=====压缩后的大小=====>"+event.size);//除1024单位为K
           			console.log("<=====压缩后的宽度=====>"+event.width);			
           			console.log("<=====压缩后的高度=====>"+event.height);	
           			var filesize = 1 * 1024 * 1024;
           			if(event.size > filesize){
           				alert("上传图片大小不能超过1M！");
           				return;
           			}
           		
	           		//上传图片至服务器
	           	    var wt=plus.nativeUI.showWaiting();//showWaiting()开始loading,closeWaiting()关闭loading
	                var task=plus.uploader.createUpload(server+"?behavior=uploadimage",
	                    {
	                    	method:"POST",
		                    timeout: 30,//上传任务超时时间
				            retry: 3,//上传任务重试次数，默认为3次
				            retryInterval: 10
	                    },
	                    function(t,status){ //上传完成
	                        if(status==200){
	                            alert("上传成功："+t.responseText);
	                            //从一个字符串中解析出json对象
	                            var rdata = JSON.parse(t.responseText);
	                            var datas = rdata.data[0];
	                            console.log(datas.url);
	                            //从一个对象中解析出字符串
	                            //console.log(JSON.stringify(datas));
	                            wt.close(); //关闭等待提示按钮
	                        }else{
	                            var rdata = JSON.parse(t.responseText);
	                            var datas = rdata.data[0];
	                            console.log(datas.msg);
	                            alert("上传失败："+datas.msg);
	                            wt.close();//关闭等待提示按钮
	                        }
	                    }
	                );
	                //添加其他参数addFile: 添加上传文件、addData: 添加上传数据、start: 开始上传任务、pause: 暂停上传任务、resume: 恢复暂停的上传任务、abort: 取消上传任务
	                task.addFile(event.target,{key:"upload_file"});
	                task.addData("websiteid","demo");
	                task.addData("tokenid","1");          
	                task.start();
           		},		
           		function(error) {		
           			console.log("压缩失败:"+error.message); 
           		});
               
            }  
            if(window.plus){  
                plusReady();  
            }else{  
                document.addEventListener("plusready",plusReady,false);  
            }    
            
			function getposition() { 
			    plus.geolocation.getCurrentPosition(function(p) { 
			        var codns = p.coords; // 获取地理坐标信息； 
			        lat = codns.latitude; //获取到当前位置的纬度； 
			        lng = codns.longitude; //获取到当前位置的经度 
			        console.log(JSON.stringify(codns));
			        alert('经度：'+lng+' '+'纬度：'+lat);
			    }, function(e) { 
			        console.log("获取百度定位位置信息失败：" + e.message); 
			    }, { 
			        provider: 'baidu' 
			    }); 
			} 

			//旋转图片，本文没用到 
			function rotateImage(imagePath) { 
			    plus.zip.compressImage({ 
			            src: imagePath, 
			            dst: '_doc/zip_'+imagePath.substr(imagePath.lastIndexOf('/') + 1), 
			            rotate: 90 // 旋转90度 
			        }, 
			        function() { 
			            alert("Compress success!"); 
			        }, 
			        function(error) { 
			            alert("Compress error!"); 
			        }); 
			}