ajax传数据和图片(base64格式)

最新推荐文章于 2024-05-13 17:58:51 发布

黑骐

最新推荐文章于 2024-05-13 17:58:51 发布

阅读量1.9w

点赞数 6

分类专栏： web 文章标签： base64 javascript ajax

本文链接：https://blog.csdn.net/lugia_Du/article/details/52016590

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在写网站，作为一个热衷原生js的程序员，我坚决不肯入伍jq(虽然在老师的胁迫下也学习了)

用ajax提交的，后台原生的PHP

搞了几天，总算没白搞。

现在十点多了，我还在搞，应该早点睡觉。

XMLHttpRequet的用法(js版)

var xmlhttp;
function uploadData()
{
	// 这个支持新的浏览器
	if (window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequert();
	}
	// IE5 IE6 老版本浏览器
	else if (window.ActiveXObject)
	{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if  (xmlhttp != null)
	{
		var url = "text.php";
		// 这里拼接下要传送的data 格式如下
		var data = "name1=name1&name2=name2&name3=name3";
		// 这里赋一个自定义的state_Change的方法 当状态改变的时候会调用 注意这里没有括号 有括号的那不是函数 而是函数的返回值
		xmlhttp.onreadystatechange = state_Change;
		// 这个ture是异步
		xmlhttp.open("POST", url, ture);
		// POST需要设置这个 GET不用
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		// 如果你用GET方法 直接xmlhttp.send(); data直接拼接 ? + data在url后面就可以
		xmlhttp.send(data);
		}
	}
}

后台那边

// 我用的utf-8
header("Content-Type:text/html; charset=utf=8");
$arr = $_GET;
// 打印数组
foreach ($arr as $k => $v)
{
	echo $k."=>".$v."\n";
}

这个很简单就是之前我的服务器没搭好(mac下设置比windows麻烦好多好多好多……) 所以一直没接到POST数据被折磨了一段时间才知道是这个问题……

下面讲讲图片

我喜欢用base64来传，好处太多了（自己研究去吧）

思路就是用input获取图片，用FileReader读取图片为base64，然后ajax到后台，再存成图片

这里写下最简单的代码

老师说正规项目不能这么取名哦一定要贴切有实际意义（但我管他呢边呆着去= =）

var input = document.getElementById("input");
var reader = new FileReader();
reader.readAsDataURL(input.files[0])
reader.onload = function (evt)
{
	var base64 = reader.result;
	// 重点来了 ajax在传输过程中 加号会变成空格 base64里是有加号的我不幸掉进了这个坑……
	// 把+替换成编码 %2B是加号的编码
	var newBase64 = base64.replace(/\+/g, "%2B");
	然后就可以按照上面那个方法发给服务器端了
}

服务器端处理

如果你没有限制图片类型需要截取字符自己判断下是什么类型的图片(比如jpeg还是png)

$base64 = $_POST['newBase64'];
// png格式
//  把头掐了
$image = base64_decode(str_replace('data:image/png;base64,' '', $base64));
file_put_contents('text.png'', $image);
//jpeg
$image = base64_decode(str_replace('data:image/jpeg;base64,' '', $base64));
file_put_contents('text.jpg'', $image);
// 其他图片格式请自行脑补

2016年7月24日

黑骐