html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.  
  9. <input id="load" type="file" onchange="upload(this.files)" name="myfile"/>
  10. <div id="dd"></div>
  11.  
  12. <script src="jquery-1.9.1.min.js"></script>
  13. <script>
  14.  
  15. function upload(f){
  16.  
  17.         var str = "";
  18.         var imgtype="";
  19.         var gs=$("#load").val(); //获取图片url
  20.         var src="";
  21.  
  22.         imgtype = gs.toLowerCase().split('.');//截取图片格式 png，jpg，是一个数组
  23.         imgtype =imgtype[1];//选取
  24.  
  25.         for(var i=0;i<f.length;i++){
  26.  
  27.             var reader = new FileReader();
  28.             reader.readAsDataURL(f[i]);
  29.  
  30.             reader.onload = function(e){
  31.             src=e.target.result;//base64图片
  32.  
  33.             str+="<img src='"+e.target.result+"'/>";
  34.             $("#dd").html(str); //预览图片
  35.  
  36.                 $.ajax({
  37.  
  38.                         url:"chul.php",
  39.                         type:"post",
  40.                         data:{
  41.                         src:src,
  42.                         imgtype:imgtype
  43.                         },
  44.                         success:function(data){
  45.                         console.log(data)
  46.                         }
  47.  
  48.                 })
  49.  
  50.         }
  51.         }
  52.  
  53. }
  54.  
  55. </script>
  56. </body>
  57. </html>

php：

  1. <?php
  2. header('Content-type:text/html;charset=utf-8');
  3. //转换base64图片 必须手动建一个img文件夹
  4.    define('UPLOAD_DIR', 'img/');
  5.    $img = $_POST['src'];
  6.    $imgtype=$_POST["imgtype"];
  7.  
  8. //判断图片格式类型
  9.    if($imgtype=="png"){
  10.  
  11.        $img = str_replace('data:image/png;base64,', '', $img);
  12.    }
  13.  
  14.    if($imgtype=="jpg"){
  15.  
  16.        $img = str_replace('data:image/jpeg;base64,', '', $img);
  17.    }
  18.  
  19.    $img = str_replace(' ', '+', $img);
  20.    $data = base64_decode($img);
  21.  
  22. //判断图片格式类型
  23.    if($imgtype=="png"){
  24.        $imgurl = UPLOAD_DIR . uniqid(). '.png';
  25.  
  26.    } 
  27.  
  28.     if($imgtype=="jpg"){
  29.            $imgurl = UPLOAD_DIR . uniqid(). '.jpg';
  30.  
  31.        } 
  32.  
  33.     echo $img;
  34.    //把图片写入文件中
  35.    $success = file_put_contents($imgurl, $data);
  36. ?>

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. nodejs中命令行和node交互模式的区分

    来自:廖雪峰教程 么么哒~ 命令行模式和Node交互模式 请注意区分命令行模式和Node交互模式. 看到类似C:\>是在Windows提供的命令行模式: 在命令行模式下,可以执行node进入No ...

  2. Python匹马行天下之python之父

    龟叔和他的python 经过了漫长的旅程,终于要看到主角Python了.Python是现在非常非常流行的编程语言,在我们能看到的大部分编程语言排行榜中,Python都能在前三甲中拥有一席之地 ,并且发 ...

  3. Jmeter---参数化之用户参数

    总结: 参数化几次就要设置几个线程,执行的时候,是按顺序执行,下面的请求也会跟着请求

  4. SSH的两种登录方式以及配置

    前言 SSH简介 Secure Shell(SSH) 是由 IETF(The Internet Engineering Task Force) 制定的建立在应用层基础上的安全网络协议.它是专为远程登录 ...

  5. mysql 04_章基本查询

    当我们使用select查询语句向数据库发送一个查询请求,数据库会根据请求执行查询,并返回一个虚拟表,其数据来源于真实的数据表. 一.查询所有数据:所有的字段.所有的记录 格式:SELECT * FRO ...

  6. JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  7. 导出sheet到新文件夹当中

    Sub 导出当前客户达成分析()Application.ScreenUpdating = FalsemyName1 = Sheets("日期统计表").Range("B1 ...

  8. DEV的GridControl控件的选中列属性设置高光

    设置Run Designer=>Views=> OptionsSelection下面的: EnableAppearanceFocusedCell = False,//鼠标移开,失去焦点,仍 ...

  9. 使用OCCI操作Oracle数据库写入中文乱码

    解决方法如下: oracle::occi::Environment *pOracleOcciEnv = Environment::createEnvironment(oracle::occi::Env ...

  10. IDEA快捷键(收集自网络后整理)

    快捷键 说明 CTRL+B 快速打开光标处的类或方法 CTRL+C 拷贝 CTRL+D 复制当前行到下一行 CTRL+E 最近打开的文件 CTRL+F 当前文件查找特定内容 CTRL+G 定位行 CT ...