base64单图多图上传图片

示例
html

<form name="form1" method="post" action="xxxxx" onSubmit="return chkfrm(this);" >
	<img src="/images/download.jpg" class="img-circle" />
	<input type="file" id="headimgurl" name='headimgurl' accept="image/*" style="display:none" value=""/>
    <input type="text" id="logopicbase" name='logopicbase' style="display:none" value=""/>
</form>

jq

$(".img-circle").click(function () {
        $("#headimgurl").click(); //隐藏了input:file样式后，点击头像就可以本地上传
        $("#headimgurl").on("change",function(){
            var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
            if (objUrl) {
                $(".img-circle").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                var image = new Image();
                image.crossOrigin = '';
                image.src = objUrl;
                image.onload = function(){
                    var base64 = getBase64Image(image);
                    // console.log(base64);
                    $("#logopicbase").val(base64) ;
                };
                var file = $("#headimgurl") ;//清空input的file值
                file.after(file.clone().val(""));
                file.remove();
            }else{
                layer.open({
                    content: '上传错误',
                    time: 2
                });
            }
        });
    });

    //建立一個可存取到該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 ;
    }

    //生成图片的base64编码
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        var width = img.width;
        var height = img.height;
        // 按比例压缩2倍
        var rate = (width<height ? width/height : height/width)/2;
        //原比例生成画布图片
        // var rate = 1;
        canvas.width = width*rate;//画布宽
        canvas.height = height*rate;
        // console.log(canvas);
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    }

php

if (!empty($_POST['logopicbase'])) {
                $base64_image_content = $_POST['logopicbase'];
					//匹配出图片的格式
                if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
                    $type = $result[2];
                    $new_file_date = date('Ymd', time());
                    $new_file = "./uploads/image/" . $new_file_date . "/";//文件存储位置
                    if (!file_exists($new_file)) {
                        //检查是否有该文件夹，如果没有就创建，并给予最高权限
                        mkdir($new_file, 0700);
                    }
                    $time = time();
                    $new_file = $new_file . $time . ".{$type}";
                    $src = "/uploads/image/" . $new_file_date . "/". $time . ".{$type}";
                    //生成图片file_put_contents(filename,data);filename:要被写入数据的文件名;data要写入的数据。类型可以是 string，array 或者是 stream 资源
                    //$base64_string= explode(',', $base64_string); //截取data:image/png;base64, 这个逗号后的字符
					//$data= base64_decode($base64_string[1]);　　//对截取后的字符使用base64_decode进行解码
                    if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
                        $rootPath =__ROOT__.$src;
                        $data['headimgurl']=$rootPath;//将修改后路径存到数据库
                    } else {
                        $this->error('图片保存失败',U('index',array('wsid'=>$wsshop['id'])));
                    }
                }
                unset($_POST['logopicbase']);
            }

上传多张图片示例
html

<form>
	<p>晒晒你的图片</p>
                                <img src="/imgs/add-button.jpg" id="{$vo['gid']}" class="img-circle" data-id="{$vo['id']}">
                                <input type="file" id="compic{$vo['id']}" name="compic{$vo['id']}" accept="image/*" style="display:none" value=""/>
                                <input type="text" id="compicbase{$vo['id']}" name="compicbase{$vo['id']}" style="display:none" value=""/>
                                <div class="showpics{$vo['id']}">

                                </div>
</form>

jq

	$(".img-circle").click(function () {

        var id= $(this).data("id");
        var gid = $(this).attr("id");
        var countimg = $(".showpics"+id+" > img").length;
        if(countimg>=8){
            alert('最多只能上传8张图片');
        }else{
            $("#compic"+id).click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#compic"+id).on("change",function(){
                var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {

                    // $("#showpic"+id).attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                    var image = new Image();
                    image.crossOrigin = '';
                    image.src = objUrl;
                    image.onload = function(){
                        var base64 = getBase64Image(image);
                        // console.log(base64);
                        // $("#logopicbase"+id).val(base64) ;
                        var showimg = "<img src='"+objUrl+"' class='img-thumbnail'>";//添加图片显示
                        showimg += "<input type='text' name='compicbase"+gid+"[]' value='"+base64+"' style='display: none;'>";//添加post传值
                        $(".showpics"+id).append(showimg);//显示

                    };
                    var file = $("#compic") ;//清空input 的file值,否则会出现第一次一张,第二次两张,3次3张....
                    file.after(file.clone().val(""));
                    file.remove();
                }
            });
        }

    });

    //建立一個可存取到該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 ;
    }

    //生成图片的base64编码
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        var width = img.width;
        var height = img.height;
        // 按比例压缩2倍
        var rate = (width<height ? width/height : height/width)/2;
        //原比例生成画布图片
        // var rate = 1;
        canvas.width = width*rate;//画布宽
        canvas.height = height*rate;
        // console.log(canvas);

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
        //img:规定要使用的图像、画布或视频。; 0, 0,:x y坐标起始剪切位置; width, height,:可选。被剪切图像的宽高度
        // 0, 0,:在画布上放置图像的 x y坐标位置;width * rate, height * rate:可选。要使用的图像的宽高度。（伸展或缩小图像）
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    }