1、关于ajax2.0版本的理解可以参考上一篇博客https://blog.csdn.net/qq_42181069/article/details/80328831#comments;
2、今天的拓展是一个新增图片预览功能的案例,在我们账号更换图片的时候会经常用的到这个技术,点击选择文件更换图片即可在不刷新页面的时候更新图片,案例效果如下图:
3、代码解析如下:
3.1 表单元素,设置为file格式
<body>
<h2>ajax2.0图片预览</h2>
<input type="file">
<img src="" alt="">
</body>="">
3.2 用js原生的方法来操作ajax
<script>
//确定好什么时候需要预览图片
document.querySelector('input').οnchange=function(){
//ajax2.0上传这个图片
//创建异步对象
var ajax=new XMLHttpRequest();
//请求行
ajax.open('post','./backData.php');
//回调函数
ajax.οnlοad=function(){
console.log(ajax.responseText);
//把url设置给img即可
document.querySelector('img').src=ajax.responseText;
}
//请求主体
var sendData=new FormData();
//自己追加数据
sendData.append('icon',this.files[0]);
ajax.send(sendData);
}
</script>
3.3 backData.php的书写
<?php
//可以试着输出一下数据,看下数据有没有传进来
var_dump($_FILES);
//保存图片即可,因为我们编辑器的格式是utf—8,我们要存进图片需要转换下格式
$fileName_GBK=iconv('utf-8','gbk',$_FILES['icon']['name']);
move_uploaded_file($_FILES['icon']['tmp_name'],'img/'.$fileName_GBK);
//返回图片的名字
echo 'img/'.$_FILES['icon']['name'];
?>
总结:ajax2.0版本使用起来很方便,实现图片预览功能需要用到这种异步对象,不加载页面的同时实现图片的更换,本实例就是简单的实现了这个功能,阐述了一下图片预览功能的原理,大家可以在此基础上进行拓展和优化。在更的两篇ajax2.0的博客中,我采用的都是js原生的写法,会使得代码的行数稍多,在jquery中,大神们已经封装好了ajax的函数,我将会在下一篇博客中阐述一下JQ结合ajax2.0的使用。