Bootstrap

图片预览上传+php服务端处理

前台:

<label for="file" class="img_wp" οnclick="zhengmian()"  >
<img src="/m/images/z_morenxin.png" style="width: 50px;height: 50px;" alt="" id="zmz">
<img id="sc"  src="/m/images/zz_shanchu.png" style="cursor:pointer;width:20px;height: 20px;position: absolute; top:0px" >

<input type="file"  class="file-input" accept="image/*" οnchange="getzImg(this)" style="display:none" value="" id="img_z"/>
前台:js
$("#sc").click(function (){
    $(this).hide();
    $("#zmz").attr('src','/m/images/z_morenxin.png');
    $("#zmz").css("height","50px");
    $("#zmz").css("width","50px");


})
function zhengmian(){
    $('#img_z').click();
}

function getzImg(imgFile){

    var file = imgFile.files[0];

    var reader = new FileReader();
    reader.readAsDataURL(file);//将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件
    reader.onload = function(e){
        $("#zmz").attr("src",e.target.result);
    }
}

服务端:

var imgsrc=$("#zmz").attr("src");//图片数据通过POST传递服务端

$img为服务端接受的图片数据

$bankurl=$this->setimg($uid,$img,'kahao');

保存图片服务端

 function setimg($uid=0,$img='',$fx='')
    {

// 获取图片
        list($type, $data) = explode(',', $img);

// 判断类型
        if(strstr($type,'image/jpeg')!==''){
            $ext ='.jpg';// ‘.jpg’;
        }elseif(strstr($type,'image/gif')!==''){
            $ext ='.gif';
        }elseif(strstr($type,'image/png')!==''){
            $ext = '.png';//‘.png’;
        }

        $yuming = str_replace(array('www','.',),'',$_SERVER["HTTP_HOST"]);
        if(!empty($yuming)) $yuming = $yuming.DS;
        // $photolj = SYS_PATH.'photos'.DS.$yuming.$fx.DS.$uid;//原图

        $photo ='photos'.DS.$yuming.$fx.DS.$uid.DS.time().$ext;//原图

        $fop = Import::fileop();

        $fop->checkDir($photo);



        // $photo = SYS_PATH.'photos'.DS.$yuming.$fx.DS.$uid.DS.time().$ext;//原图
// 生成的文件名
        //  $photo =SYS_PATH_PHOTOS.$uid. DS .time().$ext;
       // file_put_contents('tupian.txt','新的图片'.$photo."\r\n",FILE_APPEND);
// 生成文件
        file_put_contents($photo, base64_decode($data),true);
        return $photo;
    }

;