html5标准经过几年的发展,主流浏览器都支持的比较完美了,比如chrome,Firefox,opera以及使用webkit浏览器内核的国产浏览器.
html5标准里添加了许多新的特性,比如js的FileReader接口,可以读取客户端文件的内容,还支持了CSS3标准.
正如标题上所述的功能正是用到了JS的FileReader这个接口来实现Ajax上传图片的功能.
先说一下实现的思路:1.先通过JS的FileReader接口将图片内容读取成Base64加密的字符串;2.通过Ajax将读取到的图片内容Base64加密的字符串提交到服务器;3.通过PHP先将加密字符串剔除掉base64的头,再将处理后的Base64加密的字符串用base64_decode解析加密的字符串,最后使用file_put_contents($filename,$data)生成图片文件;
1.先贴上js读取图片数据的代码:
未选择图片的样子:
QQ截图0228141009.png
选择图片后的样子:
Paste_Image.png
PS:注意红色选择框的数据,这个就是需要传到后台的图片加密的数据
2.通过ajax将图片数据提交到后台:
$("#ajax_upload").click(function(){
var img_data = $("#img_data").val();
if(img_data == ""){
return ;
}
$.post("",{img_data:img_data},function(res){
});
});
PS:对数据的处理可以在提交数据之前,也可以在服务器上进行处理.
3.当后台接受到数据,对这个图片加密数据进行处理,这里我就拿PHP代码做个实例:
好了,这就是Ajax上传图片的一种思路,不兼容低版本的浏览器,不过在移动端是个不错的选择,因为移动浏览器都是支持h5的标准的,这个上传图片完全没有用涉及任何插件,所以还是比较轻便的方法.
