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

最近在写网站，作为一个热衷原生js的程序员，我坚决不肯入伍jq(虽然在朋友的怂恿下也学习了)，常年做app开发，用不惯表单提交，就用ajax传前台数据。

后台用的原生PHP，没错，我就是一个原生爱好者！

搞了几天，总算有了眉目。

现在十点多了，我还在加班……不知道还有没有比我更苦逼的CEO，代码得我写，客户得我谈，宣传得我想，琐事得我跑，加班也得自己加，朋友戏称我CXO(X == E || X == T || X == F)，还在赶个项目，不知道几点能睡，不行就得通宵了

言归正传。

简单讲一下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-8header("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);// 其他图片格式请自行脑补

大功告成 实在是呕心沥血之作 记录一下 生怕下次忘了

另：为了加深记忆 代码纯手打 哪里打错了请告诉我

我又离全栈工程师近了一步。

作为18岁的程序媛，我很希望能够进步，以后也许会多写几篇。

如果写的哪里有什么问题，欢迎随时联系我，但是我不经常在线。

也可以在我的微博上私信我，我的微博：黑騏(骐是繁体的)

如果要转载我的文章，请署名黑骐并附上原文链接，在下先行谢过。

2016年7月24日

黑骐