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的使用。

阅读更多
想对作者说点什么? 我来说一句

ASPAJAXSourceCode.msi

2007年07月21日 809KB 下载

ASP.net Ajax2.0安装包

2010年01月26日 839KB 下载

实现图片预览功能

2017年11月24日 426KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭