html5标准Ajax上传图片
2017-02-28 本文已影响248人
卖小女孩的小火柴
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读取图片数据的代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img id="img" src="">
<input type="hidden" name="img_data" id="img_data"/>
<input type="file" id="img_select" accept="image/*" />
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#img_select").change(function(){
var file = this.files[0];
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
console.log(e);
$("#img").attr("src",this.result);
$("#img_data").val(this.result);
}
});
})
</script>
</html>
未选择图片的样子:
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代码做个实例:
<?php
$img_data = $_POST["img_data"];
//加密数据处理放在后台
if(!empty($img_data) && false !== strpos($img_data,"base64,")){
list($header,$content) = explode("base64,",$img_data);
$content = base64_decode($content);
$filename = "a.jpg";
file_put_contents($filename, $content);
}
好了,这就是Ajax上传图片的一种思路,不兼容低版本的浏览器,不过在移动端是个不错的选择,因为移动浏览器都是支持h5的标准的,这个上传图片完全没有用涉及任何插件,所以还是比较轻便的方法.
