如何有效实现前端压缩图片并上传功能

分类：HTML5+

压缩图片

　　随着现在手机的像素越来越高，很多照片动辄几兆甚至十几兆，上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说，处理起来这样的问题往往不知道该怎么下手，那么燚轩科技下面就跟大家讲解一下如何在前端进行图片压缩后上传到服务器。

以上传单张图片为例，多张图片同理，多嵌套一层循环即可。代码实现如下：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片压缩上传</title>
<link href="css/uploadSingleImg.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/pictureHandle.js"></script>
</head>
<body>
<form>

<!--文件选择input-->  
<h3>文件选择：</h3>  
<input class="btn btn-default" type="file" id="upFile" multiple="multiple" />  

<h3>传给后台</h3>  
<input class="btn btn-default" type="button" id="upTo" value="提交"/>  

<!--后台所要获取的文件base64-->  
<h3>后台获取base64文件数据：(一个隐藏域)</h3>  
<input id="imgOne" name="imgOne" type="hidden"/>  

<!--所选文件压缩前预览-->  
<h3>压缩前预览：</h3>  
<img src="" id="preview"/>  
<div id="yulan1"></div>  
<!--所选文件压缩后预览-->  
<h3>压缩后预览：</h3>  
<img src="" id="nextview"/>  
<div id="yulan"></div>

</form>
</body>
</html>

Js:
$(function(){
var _upFile=document.getElementById("upFile");

_upFile.addEventListener("change",function(){  

if (_upFile.files.length === 0) {    
    alert("请选择图片");    
    return; }    

for(var i=0;i<_upFile.files.length;i++){  
    var oFile = _upFile.files[i];   

    if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){    
        alert("照片上传：文件类型必须是JPG、JPEG、PNG");    
        return;    
    }  

    var reader = new FileReader();    
    reader.onload = function(e) {    
        var base64Img= e.target.result;  
        //压缩前预览  
        //$("#preview").attr("src",base64Img);    
        var str1 = '<img src="'+base64Img+'">';  
        $('#yulan1').append(str1);  
        //--执行resize。    
        var _ir=ImageResizer({    
                resizeMode:"auto"    
                ,dataSource:base64Img    
                ,dataSourceType:"base64"    
                ,maxWidth:1200 //允许的最大宽度    
                ,maxHeight:600 //允许的最大高度。    
                ,onTmpImgGenerate:function(img){    

                }    
                ,success:function(resizeImgBase64,canvas){  
                    //压缩后预览  
                    //$("#nextview").attr("src",resizeImgBase64);   
                    var str = '<img src="'+resizeImgBase64+'">';  
                    $('#yulan').append(str);  
                    //赋值到隐藏域传给后台  
                    $('#imgOne').val($('#imgOne').val()+';'+resizeImgBase64.substr(22));  

                }    
                ,debug:true    
        });    

    };    
    reader.readAsDataURL(oFile);   
}  

},false);    

$('#upTo').on('click',function(){  
    if (_upFile.files.length === 0) {    
    alert("请选择图片");    
    return; }  

    $.ajax({  
        url:'server.php',  
        type:'POST',  
        dataType:'json',  
        data:{  
            imgOne:$('#imgOne').val()  
        },  
        success:function(data){  
            alert(data.msg);  
        }  
    });  
});

});

php处理：
<?php
$img=trim($_POST['imgOne'],';');
$imgarr=explode(';', $img);
foreach($imgarr as $k=>$v){
//解码
$tmp = base64_decode($v);
//写文件
$filename=time().$k.'.jpg';
$path='./upload/';
file_put_contents($path.$filename, $tmp);
}
$res['msg']='上传成功！';
echo json_encode($res);

　　该方法实现了PC端文件多选，在手机端可以多次选择上传多张图片的效果，现在已经理解的程序员可以尝试一下了，如果还存在不理解的地方，可以在下方留言讨论。

　　本文由专业的app开发公司燚轩科技整理发布，如需转载请注明原文作者及出处!

0 赞关注分享

0 个评论

要回复文章请先登录或注册

如何有效实现前端压缩图片并上传功能

0 个评论

目录

公告

相关问题