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

?>

js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹的更多相关文章

  1. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  2. H5实现多图片预览上传，可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  3. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  4. jquery.uploadView 实现图片预览上传

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...

  5. js实现移动端图片预览：手势缩放， 手势拖动，双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  6. JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  7. 【javascrpt】——图片预览和上传，兼容IE 9-

    下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说,要实现图片预览非常简单: 1.fileReader. ...

  8. summernote图片上传功能保存到服务器指定文件夹+php代码+java方法

    1.summernote富文本编辑器 summernote是一款基于bootstrap的富文本编辑器,是一款十分好用的文本编辑器,还附带有图片和文件上传功能. 那么在我们网站中想吧这个图片上传到服务器 ...

  9. 【Js应用实例】图片预览

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Git及github使用（三）更新自己的github代码

    如果之前上传的代码到目前有所改动,想要更新github上的代码文件.希望本篇对你有所帮助. 1.拉取代码本地修改后上传代码 提交成功后的效果如下: 2.更新展示在github首页的readme内容 上 ...

  2. enumrate用法

    转自*https://www.runoob.com/python/python-func-enumerate.html*侵删 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组 ...

  3. Flutter 类似viewDidAppear 的任务处理

    前言 在任务之中 ,有些实时任务比较重的需求,需要在类似 iOS viewDidAppear 里面执行数据请求任务,如:上一个页面返回pop 后执行网络请求任务.在flutter中如何实现呢?  目前 ...

  4. ASP.NET 页面的生命周期

    本文转载自清风飘过的博客,地址:http://www.cnblogs.com/couhujia/archive/2010/04/23/1718405.html 页面生命期分三个阶段:建立阶段,回发阶段 ...

  5. matlab 求已知概率密度函数的随机数生成

    N=10000; %需要随机数的个数 a=zeros(N,1); %存放随机数的数列 n=0; f1=@(t) 1./(1.2*pi*(1+5*(t-7.3).^2)); f2=@(t) 1./(1. ...

  6. js里json和eval()

    JSON * - JS中的对象只有JS自己认识,其他的语言都不认识 * - JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别, * 并且可以转换为任意语言中的对象,JSON在开发中主 ...

  7. redis笔记_源码_双端链表list

    参考:https://redissrc.readthedocs.io/en/latest/datastruct/adlist.html

  8. Android App上架流程

    想要把APP上架到应用市场都要先注册开发者账号才可以.这里的方法包括注册帐号和后期上架及一些需要注意的问题.注意:首次提交应用绝对不能随便删除,否则后面再提交会显示应用APP冲突,会要求走应用认领流程 ...

  9. 基于VUE利用pdf.js实现文件流形式的pdf显示

    首先推荐大家看一下这个demo vue-pdf.js-demo,这里面包含固定本地地址,远程pdf地址,通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf.(所谓文件流,就是 ...

  10. luoguP1154 奶牛分厩 [数论]

    题目描述 农夫约翰有N(1<=N<=5000)头奶牛,每头奶牛都有一个唯一的不同于其它奶牛的编号Si,所有的奶牛都睡在一个有K个厩的谷仓中,厩的编号为0到K-1.每头奶牛都知道自己该睡在哪 ...