Jquery+HTML5+PHP实现前台压缩图片并上传

其他 2018-12-25 14:53:32 阅读次数: 0

先上图吧：


待上传


上传后


功能描述：

使用HTML5在前台进行图片压缩，然后上传至服务器上由PHP保存。此插件只适用于PC端，未做手机端页面优化，如果需要应用在手机端请自行优化UI，即然是PC端为什么还要前端压缩呢？PC端很容易使用图片处理软件进行压缩，那是适用于有会PS，会光影魔术手的人。但还有很多小白，他们就是简单的拿手机或相机拍了照就是要上传的，他样不想或不会或工作流程问题无法处理图片。好了，废话不说上代码。


PHP端代码

<?php
//接收base64格式图片
$postIMG = $_POST['image'];
$fileName = date('YmdHis') .'-'. mt_rand(100,999);
$imgPath = './uploads/'. $fileName . '.jpg';
$data = base64_decode($postIMG);
$fp = fopen($imgPath,'w');
fwrite($fp,$data);
fclose($fp);
$info = '上传成功';
$status ='1';
$url = '/js_upload/uploads/'.$fileName . '.jpg'; //请根据你的实际情况设置返回的路径
$return = array('info'=>$info,'status'=>$status,'url'=>$url);
echo json_encode($return);

JavaScript核心代码：部分代码来自网上 

/**
H5u Html5客户端压缩图处并上传，服务端php接收base64编码图片并保存
*/
(function($){
            $.fn.extend({
                aiiUpload:function(obj)
                {
                    if(typeof obj !="object")
                    {
                        alert('参数错误');
                        return;
                    }
                    var imageWidth,imageHeight;
                    var base64;
                    var file_num=0;
                    var fileInput=$(this);
                    var fileInputId=fileInput.attr('id');
                    var randID = Math.floor(Math.random()*1000); //随机ID
                    createDoc('#'+fileInputId,obj.method,obj.action,obj.subText,randID,obj.formIdName);
                    $('#h5u_file_'+ randID).change(function(){
                        if(test(this.value)==false)
                        {
                            alert('格式错误');
                            return;
                        }
                        var objUrl = getObjectURL(this.files[0]);
                        if (objUrl) 
                        {
                            //imgBefore(objUrl,file_num);
                            render(objUrl,obj.max_w,obj.max_h,file_num,randID,obj.action);
                            file_num++;
                        }
                    });
                }
            });
            //创建form表单
            function createDoc(objID,form_method,form_action,sub_txt,rand_id,form_id_name)
            {                
                var element=$(objID);
                //element.append('<ul class="viewList"></ul>').append('<div class="fileBox"><input type="file"  id="aii_file" /><div class="file_bg"></div></div>').append('<form id="aii_upload_form" method="'+form_method+'" action="'+form_action+'"></form>').append('<canvas id="canvas"></canvas>');
                var str = '<div class="upbox3"><canvas id="canvas_'+ rand_id +'"></canvas><div class="options hide" id="h5u_options_'+ rand_id +'"><a class="btn-del" id="h5u_del_'+ rand_id +'">删除</a><a class="btn-big" id="h5u_big_'+ rand_id +'">放大</a></div><img src="" id="h5u_preview_'+ rand_id +'"/><div class="js-upbtn" id="h5u_upbtn_'+ rand_id +'"><a href="javascript:;" class="h5u_file"><input type="file" class="up_file3" id="h5u_file_'+ rand_id +'" accept="image/*">+上传附件</a><p class="a-behind">'+ sub_txt +'</p></div><input type="hidden" name="'+ form_id_name +'" id="h5u_form_hidden_'+ rand_id +'" ><div class="status hide" id="h5u_status_'+ rand_id +'"></div></div>';
                element.append(str);
                //放大
                $("#h5u_big_"+ rand_id).click(function(){
                    alert('big'+ rand_id)    
                });
                //删除1.img.src = '', 2.hidden.val = '',3.show upbtn,hide options,4. status.hide
                $("#h5u_del_"+ rand_id).click(function(){
                    $("#h5u_preview_"+ rand_id).attr('src','');
                    $("#h5u_form_hidden_"+ rand_id).val('');
                    $("#h5u_options_"+ rand_id).hide();
                    $("#h5u_upbtn_"+rand_id).show();
                    $("#h5u_status_"+ rand_id).hide();
                });
            }
            //检查文件类是否是图片格式
            function test(value)
            {
                var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g');
                return regexp.test(value);
            }
            function render(src,MaximgW,MaximgH,idnum,rand_id,action)
            {                
                console.log('rand_id',rand_id);
                var image=new Image();
                image.onload=function()
                {
                    //如果图片的尺寸小于定义的最大宽和高，则以图片原始尺寸为准
                    var canvas=document.getElementById('canvas_'+ rand_id);
                    var previewIMG = document.getElementById('h5u_preview_'+ rand_id);                   
                    //预览图片                    
                    previewIMG.src = src;
                    
                    if(image.width < MaximgW && image.height < MaximgH){
                        imageWidth = image.width;
                        imageHeight = image.height;
                    }else{
                        if(image.width>image.height)
                        {
                            imageWidth=MaximgW;
                            imageHeight=MaximgW*(image.height/image.width);
                        }
                        else if(image.width<image.height)
                        {
                            imageHeight=MaximgH;
                            imageWidth=MaximgH*(image.width/image.height);
                        }
                        else
                        {
                            imageWidth=MaximgW;
                            imageHeight=MaximgH;
                        }
                    }                    
                   
                    canvas.width=imageWidth;
                    canvas.height=imageHeight;
                    var con=canvas.getContext('2d');
                    con.clearRect(0,0,canvas.width,canvas.height);
                    con.drawImage(image,0,0,imageWidth,imageHeight);
                    base64=canvas.toDataURL('image/jpeg',0.5).substr(22);
                    //add_doc(base64,idnum);
                    //上传图片
                    upload_base(base64,action,rand_id);
                }
                image.src=src;                
            };
            //建立一個可存取到該file的url
            function getObjectURL(file) {
                var url = null ; 
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ; 
            }
            //预览
            function imgBefore(objUrl,idnum) 
            {
                var li='<li class="view"><img src="'+objUrl+'" id="aiiImg_'+idnum+'" idnum="'+idnum+'" /><div class="close" onclick="img_remove(this);"></div></li>'
                $('.viewList').append(li);
                var img=$('#aiiImg_'+idnum);
                //预览图片居中 填满 代码
                //console.log('asdfasdfasdf');

                img.load(function(){
                    var imgw=img.width(),
                        imgh=img.height();
                        console.log(imgw);
                        console.log(imgh);
                    if(imgw>imgh)
                    {
                        img.css('height','100%');
                        img.css('width','auto');
                        img.css('marginLeft',-(img.width()-img.height())/2+'px');
                    }
                    else if(imgw<imgh)
                    {
                        img.css('width','100%');
                        img.css('height','auto');
                        img.css('marginTop',-(img.height()-img.width())/2+'px');
                    }
                });
            }
            //上传图片
            function upload_base(base,action,rand_id){
                //隐藏上传控件按钮
               
                $('#h5u_status_'+ rand_id).html('准备上传').addClass('normal');
                $.post(action,{image:base},function(json){
                    console.log(json);
                    if(json.status == 1){
                        $("#h5u_form_hidden_"+ rand_id).val(json.url); //表单
                        $('#h5u_upbtn_'+ rand_id).hide();
                        $('#h5u_options_'+ rand_id).show();                        
                        $('#h5u_status_'+ rand_id).html('上传成功').addClass('success').removeClass('normal').show();
                    }else{
                        $('#h5u_status_'+ rand_id).html(json.info).addClass('error').removeClass('normal').show();
                    }
                },'json');
            }
            function add_doc (base,idnum)
            {
                $('#aii_upload_form').append('<input type="hidden" name="img[]" id="f_'+idnum+'" value="'+base+'"/>');
            }
        })(jQuery);

        function img_remove(element)
        {
            var num=$(element).prev().attr('idnum');
            $(element).parent().remove();
            $('#f_'+num).remove();
            console.log('asdf');
        }


HTML调用代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery + html 5 + canvas实现图片上传</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/h5Upload.js"></script>
    <link rel="stylesheet" type="text/css" href="js/h5Upload.css">
</head>

<body>
<!--
<div class="upbox3">
    <div class="options">
        <a class="btn-del">删除</a>
        <a class="btn-big">放大</a>
    </div>
   <img src="https://img.alicdn.com/imgextra/i1/2454021808/TB2IPQAXeYCK1JjSZFmXXbCyVXa_!!2454021808-0-beehive-scenes.jpg_180x180q90.jpg_.webp" />
    <a href="javascript:;" class="h5u_file">
        <input type="file" accept="image/*">+上传附件
    </a>
    <p class="a-behind">单位证件</p>
    </div>
    
-->
<style>
    .section{height:200px;}
    </style>
<section class="section">  
    <div id="box"></div>     
</section> 

<div class="content">
    <h2>营业执照</h2>
    <div id="box2"></div>
    </div>
<script type="text/javascript">  
    $('#box').aiiUpload({  
        action:'upload.php',  
        max_w:800,  
        max_h:1000, 
        subText:'单位证件',  
        formIdName:'id_card', //表字段名称
        //fileText:'选择图片'  
    });  
    
    $('#box2').aiiUpload({  
        action:'upload.php',  //后台接收图片地址
        max_w:800,   //压缩图片的最大宽度，低于此宽度不会被压缩
        max_h:1000,  //压缩图片的最大高度，低于此高度的图片不会被压缩
        subText:'营业执照',  //上传控件上显示的上传标签名称
        formIdName:'id_card2', //表字段名称
        //fileText:'选择图片'  
    });  
</script>  
</body>
</html>

下载地址： http://download.csdn.net/download/hotlinhao/10038799

猜你喜欢

转载自blog.csdn.net/hotlinhao/article/details/78339538
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022