最近在写网站,作为一个热衷原生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日
黑骐