首頁

如何有效實現壓縮圖片并上傳功能

圖片壓縮 2018-04-09 5178

随着現在手機的像素越來越高,很多照片動辄幾兆甚至十幾兆,上傳後在服務器端壓縮已經越來越不能滿足當今的需求。這對于許多技術人員(yuán)來說,處理起來這樣的問題往往不知(zhī)道該怎麽下(xià)手,那麽專業的app開(kāi)發報價燚軒科技下(xià)面就跟大(dà)家講解一(yī)下(xià)如何在前端進行圖片壓縮後上傳到服務器。

以上傳單張圖片爲例,多張圖片同理,多嵌套一(yī)層循環即可。代碼實現如下(xià):

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"><!--自己書(shū)寫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文件數據:(一(yī)個隐藏域)</h3>

    <input id="imgOne" name="imgOne" type="hidden"/>

 

    <!--所選文件壓縮前預覽-->

    <h3>壓縮前預覽:</h3>

    <img src="static/picture/beijs.png" id="preview"/>

    <div id="yulan1"></div>

    <!--所選文件壓縮後預覽-->

    <h3>壓縮後預覽:</h3>

    <img src="static/picture/beijs.png" 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 //允許的最大(dà)寬度  

                    ,maxHeight:600 //允許的最大(dà)高度。  

                    ,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端文件多選,在手機端可以多次選擇上傳多張圖片的效果,現在已經理解的程序員(yuán)可以嘗試一(yī)下(xià)了,如果還存在不理解的地方,可以留言讨論。

分(fēn)享:
分(fēn)享到微信朋友圈 +
打開(kāi)微信,點擊底部的“發現”,使用 “掃一(yī)掃” 即可将網頁分(fēn)享到我(wǒ)(wǒ)的朋友圈。 如何使用?
推薦文章

熱貼More +

服務範圍More +

聯系我(wǒ)(wǒ)們

請掃二維碼聯系客服

854221200@qq.com

185-3825-9583

QQ客服

關于  ·  招聘  ·  案例中(zhōng)心  ·  網站地圖

©@2018 燚軒科技版權所有 豫ICP備16015002号-4

百度提供搜索支持