成人无码黄动漫在线播放,亚洲国产精品一区二区色迷迷影院,欧美日本国产一区,99热只有这里有精品

首頁
  1. 當(dāng)前位置：
  2. 首頁
  3. 技術(shù)部落
  4. 如何有效實(shí)現(xiàn)壓縮圖片并上傳功能

如何有效實(shí)現(xiàn)壓縮圖片并上傳功能

圖片壓縮 2018-04-09 7049

隨著現(xiàn)在手機(jī)的像素越來越高，很多照片動(dòng)輒幾兆甚至十幾兆，上傳后在服務(wù)器端壓縮已經(jīng)越來越不能滿足當(dāng)今的需求。這對于許多技術(shù)人員來說，處理起來這樣的問題往往不知道該怎么下手，那么專業(yè)的app開發(fā)報(bào)價(jià)燚軒科技下面就跟大家講解一下如何在前端進(jìn)行圖片壓縮后上傳到服務(wù)器。

以上傳單張圖片為例，多張圖片同理，多嵌套一層循環(huán)即可。代碼實(shí)現(xiàn)如下：

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文件數(shù)據(jù)：(一個(gè)隱藏域)</h3>

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

 

    <!--所選文件壓縮前預(yù)覽-->

    <h3>壓縮前預(yù)覽：</h3>

    <img src="" id="preview"/>

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

    <!--所選文件壓縮后預(yù)覽-->

    <h3>壓縮后預(yù)覽：</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;

            //壓縮前預(yù)覽

            //$("#preview").attr("src",base64Img);  

            var str1 = '<img src="'+base64Img+'">';

            $('#yulan1').append(str1);

            //--執(zhí)行resize。  

            var _ir=ImageResizer({  

                    resizeMode:"auto"  

                    ,dataSource:base64Img  

                    ,dataSourceType:"base64"  

                    ,maxWidth:1200 //允許的最大寬度  

                    ,maxHeight:600 //允許的最大高度。  

                    ,onTmpImgGenerate:function(img){  

 

                    }  

                    ,success:function(resizeImgBase64,canvas){

                        //壓縮后預(yù)覽

                        //$("#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);


該方法實(shí)現(xiàn)了PC端文件多選，在手機(jī)端可以多次選擇上傳多張圖片的效果，現(xiàn)在已經(jīng)理解的程序員可以嘗試一下了，如果還存在不理解的地方，可以留言討論。

分享到微信朋友圈 +
打開微信，點(diǎn)擊底部的“發(fā)現(xiàn)”，使用 “掃一掃” 即可將網(wǎng)頁分享到我的朋友圈。 如何使用？
推薦文章

熱貼More +

服務(wù)范圍More +

聯(lián)系我們

請掃二維碼聯(lián)系客服

854221200@qq.com

185-3825-9583

QQ客服

關(guān)于  ·  招聘  ·  案例中心  ·  網(wǎng)站地圖

?@2018 燚軒科技版權(quán)所有 豫ICP備16015002號-4

百度提供搜索支持

燚軒軟件科技