首页

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

图片压缩 2018-04-09 4469

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

以上传单张图片为例,多张图片同理,多嵌套一层循环即可。代码实现如下:

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"><!--自己书写input样式-->

   <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端文件多选,在手机端可以多次选择上传多张图片的效果,现在已经理解的程序员可以尝试一下了,如果还存在不理解的地方,可以留言讨论。

分享到微信朋友圈 +
打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。 如何使用?
推荐文章

热贴More +

服务范围More +

联系我们

请扫二维码联系客服

854221200@qq.com

185-3825-9583

QQ客服

关于  ·  招聘  ·  案例中心  ·  网站地图

©@2018 燚轩科技版权所有 豫ICP备16015002号-4

百度提供搜索支持