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

沃风云

于 2023-04-08 07:24:25 发布

阅读量128

点赞数

文章标签：服务器前端 java php

本文链接：https://blog.csdn.net/qq_25255469/article/details/130024086

版权

该代码片段展示了前端如何使用HTML和JavaScript实现图片预览及上传功能，通过点击按钮选择图片，然后使用FileReader接口读取图片数据。当图片被选择后，其数据会被发送到服务器，服务器端接收到图片数据并进行保存，这里涉及到图片类型的检查和文件路径的构建。

摘要由CSDN通过智能技术生成

前台：

<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;
    }