1.原生写ajax实现图片预览:
结构:
<input type="file"> <img src="" alt=""> JavaScript代码: <script> document.querySelector('input').onchange =function(){ //创建异步对象 var ajax =new XMLHttpRequest(); //设置请求行 ajax.open('post','./backPreviewimg.php'); //2.0版本的可以不写请求头 //回调函数 ajax.onload =function(){ console.log(ajax.responseText); //把返回的URL直接给img即可 document.querySelector('img').src = ajax.responseText; } //设置formData var sendData =new FormData(); //没有form表单的话 可以自己追加 sendData.append('icon',this.files[0]); //设置请求主体 ajax.send(sendData); } </script> 2.使用jQuery来实现图片预览 结构是跟原生的一样的 js代码: <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ //使用ajax实现图片预览 $('input').change(function(){ var sendData =new FormData(); //当发送数据哪里没有需要的name值 可以通过formData.append出来 sendData.append('icon',this.files[0]); $.ajax({ url:'./upload.php', data:sendData, type:'post', // 一定要加这两句,不然会报错 contentType: false, processData: false, success:function(backData){ // console.log(backData); //把返回的数据(是一个图片路径)设置给img的src属性 $('img').attr('src',backData); } }) }) }) </script> 预览结构跟上面是一样的 PHP代码: <?php header('content-type:text/html;charset=utf-8'); //接收什么,就返回什么数据 //保存文件格式 $fileName =iconv('utf-8','gbk',$_FILES['icon']['name']); //更改文件路径 move_uploaded_file($_FILES['icon']['tmp_name'],'./icon/'.$fileName); //返回数据 echo './icon/'.$_FILES['icon']['name']; ?> 新建一个保存图片的文件,icon转载于:https://www.cnblogs.com/PinkYun/p/9152771.html
