html5+js壓縮圖片上傳

時間 2019-11-30

原文原文鏈接

最近在折騰移動站的開發，涉及到了一個手機裏面上傳圖片。因而通過N久的折騰，找到一個插件，用法以下：javascript

 
        <!DOCTYPE HTML> 
       
        < 
        html 
        lang 
        = 
        "zh-CN" 
        > 
       
        < 
        meta 
        name 
        = 
        "viewport" 
        content 
        = 
        "initial-scale=1.0, maximum-scale=1.0,user-scalable=no" 
        />   
       
        < 
        head 
        > 
       
        < 
        meta 
        charset 
        = 
        "UTF-8" 
        > 
       
        < 
        title 
        >LocalResizeIMG</ 
        title 
        > 
       
        </ 
        head 
        > 
       
        < 
        style 
        > 
       
        body { 
       
        margin: 20px 20%; 
       
        color:#777; 
       
        text-align: center; 
       
        } 
       
        </ 
        style 
        > 
       
        < 
        body 
        > 
       
        < 
        h1 
        class 
        = 
        "text-center" 
        >LocalResizeIMG-本地壓縮 1.0</ 
        h1 
        > 
       
        < 
        hr 
        /> 
       
        < 
        input 
        type 
        = 
        "file" 
        /> 
       
        < 
        hr 
        /> 
       
        <!-- javascript 
       
        ================================================== --> 
       
        < 
        script 
        src 
        = 
        "/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" 
        type 
        = 
        "text/javascript" 
        ></ 
        script 
        > 
       
        < 
        script 
        src 
        = 
        "/api/localResizeIMG-gh-pages/LocalResizeIMG.js" 
        type 
        = 
        "text/javascript" 
        ></ 
        script 
        > 
       
        <!-- mobileBUGFix.js 兼容修復移動設備 --> 
       
        < 
        script 
        src 
        = 
        "/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" 
        type 
        = 
        "text/javascript" 
        ></ 
        script 
        > 
       
        < 
        script 
        type 
        = 
        "text/javascript" 
        > 
       
        $('input:file').localResizeIMG({ 
       
        width: 500, 
       
        quality: 0.8, 
       
        success: function (result) { 
       
        var img = new Image(); 
       
        img.src = result.base64; 
       
        $('body').append(img); 
       
        //console.log(result); 
       
        $.ajax({ 
       
        url: './uploads.php', 
       
        type: 'POST', 
       
        data:{formFile:result.clearBase64}, 
       
        dataType: 'HTML', 
       
        timeout: 1000, 
       
        error: function(){ 
       
        alert('Error loading PHP document'); 
       
        }, 
       
        success: function(result){ 
       
        //console.log(result); 
       
        alert("Uploads success~") 
       
        } 
       
        });  
       
        } 
       
        }); 
       
        </ 
        script 
        > 
       
        </ 
        body 
        > 
       
        </ 
        html 
        >

PHP代碼：php

 
        <?php 
       
        $base64 
        =  
        $_POST 
        [ 
        'formFile' 
        ]; 
       
        $IMG 
        =  
        base64_decode 
        ( 
        $base64 
        ); 
       
        $path 
        =  
        './' 
        ; 
       
        file_put_contents 
        ( 
        $path 
        .time(). 
        '.jpg' 
        , 
        $IMG 
        ); 
       
        ?>