ajax2.0的应用实例二之图片预览功能

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').onchange=function(){
     //ajax2.0上传这个图片
     //创建异步对象
     var ajax=new XMLHttpRequest();
     //请求行
     ajax.open('post','./backData.php');
     //回调函数
     ajax.onload=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的使用。

ajax2.0的应用实例二之图片预览功能

猜你喜欢