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);
?>
js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹的更多相关文章
- 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑
项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...
- H5实现多图片预览上传,可点击可拖拽控件介绍
版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...
- 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)
前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...
- jquery.uploadView 实现图片预览上传
图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)
前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...
- 【javascrpt】——图片预览和上传,兼容IE 9-
下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说,要实现图片预览非常简单: 1.fileReader. ...
- summernote图片上传功能保存到服务器指定文件夹+php代码+java方法
1.summernote富文本编辑器 summernote是一款基于bootstrap的富文本编辑器,是一款十分好用的文本编辑器,还附带有图片和文件上传功能. 那么在我们网站中想吧这个图片上传到服务器 ...
- 【Js应用实例】图片预览
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 【ARC073F】Many Moves
题目 一个显然的\(dp\),设\(dp_{i,j}\)表示其中一个棋子在\(x_i\)点,另一个棋子在\(j\)点的最小花费 显然\(dp_{i,j}\)有两种转移 第一种是把\(x_i\)上的棋子 ...
- 21-1字符串相关api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- spring MVC <mvc:annotation-driven>
研究SpringMvc 3.2的<mvc:annotation-driven>默认干了什么 如果不配置其他参数,大致相当于以下的配置文件(参考自org.springframework.we ...
- Centos6.5离线安装gcc
木有网的centos折腾起来简直费劲的不要不要的~ 学校的虚拟机最开始只安装了一个libgcc-4.4.7-4,然而这是不够用的,比如安装软件的时候,需要输入"./configure&quo ...
- JS对象 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...
- MySQL数据库之DML(数据操作语言)
对表记录的增删改 1.MySQL之DML创建数据表user create table user( id int unsigned not null auto_increment primary key ...
- java排序,冒泡排序,选择排序,插入排序,快排
冒泡排序 时间复杂度:O(n^2) 空间复杂度O(1) 稳定性:稳定 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.这步做完后,最 ...
- 【JZOJ6346】ZYB和售货机
description analysis 其实这个连出来的东西叫基环内向树 先考虑很多森林的情况,也就是树根连回自己 明显树根物品是可以被取完的,那么买树根的价钱要是儿子中价钱最小的那个 或者把那个叫 ...
- duilib教程之duilib入门简明教程17.事件处理和消息响应
界面的显示方面就都讲完啦,下面来介绍下控件的响应. 前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEGIN_ME ...
- js 当前时间和对比时间的比较
<!DOCTYPE><html> <head> <meta charset="utf-8" /> <title>功能:当 ...