zoukankan      html  css  js  c++  java
  • js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    <input id="load" type="file" onchange="upload(this.files)" name="myfile"/>
    <div id="dd"></div>
    
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        
    
    function upload(f){
    
            var str = "";
            var imgtype="";
            var gs=$("#load").val(); //获取图片url
            var src="";
    
    
            imgtype = gs.toLowerCase().split('.');//截取图片格式 png,jpg,是一个数组
            imgtype =imgtype[1];//选取
    
    
            for(var i=0;i<f.length;i++){
    
                var reader = new FileReader();
                reader.readAsDataURL(f[i]);
    
                reader.onload = function(e){
                src=e.target.result;//base64图片
    
    
                str+="<img src='"+e.target.result+"'/>";
                $("#dd").html(str); //预览图片
    
    
                    $.ajax({
    
                            url:"chul.php",
                            type:"post",
                            data:{
                            src:src,
                            imgtype:imgtype
                            },
                            success:function(data){
                            console.log(data)
                            }
    
                    })
    
    
            }
            }
    
    
    
    
    
    }
    
    
    
    
    </script>
    </body>
    </html>

    php:

    <?php
    header('Content-type:text/html;charset=utf-8');
    //转换base64图片 必须手动建一个img文件夹
       define('UPLOAD_DIR', 'img/');
       $img = $_POST['src'];
       $imgtype=$_POST["imgtype"];
    
    //判断图片格式类型
       if($imgtype=="png"){
    
           $img = str_replace('data:image/png;base64,', '', $img);
       }
    
       if($imgtype=="jpg"){
    
           $img = str_replace('data:image/jpeg;base64,', '', $img);
       }
    
    
       $img = str_replace(' ', '+', $img);
       $data = base64_decode($img);
       
    //判断图片格式类型
       if($imgtype=="png"){
           $imgurl = UPLOAD_DIR . uniqid(). '.png';
    
       } 
    
    
        if($imgtype=="jpg"){
               $imgurl = UPLOAD_DIR . uniqid(). '.jpg';
               
           } 
    
        echo $img;
       //把图片写入文件中
       $success = file_put_contents($imgurl, $data);
    ?>
  • 相关阅读:
    JMeter一台机器可以支持多大的并发量
    apache遇到的权限以及其他一些问题
    高级运维要学习的知识
    运维学习的博客网站
    bind的各个记录的详解
    gdb的安装与使用
    CentOS6.x机器安装Python2.7.x
    centos7搭建nginx+uwsgi运行django环境
    学会数据库读写分离、分表分库——用Mycat,这一篇就够了!我转的
    linux运维、架构之路-xtrabackup
  • 原文地址:https://www.cnblogs.com/xiaobaibubai/p/8493011.html
Copyright © 2011-2022 走看看