html5的ajax上传图片,html5标准Ajax上传图片

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截图20170228141009.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的标准的,这个上传图片完全没有用涉及任何插件,所以还是比较轻便的方法.