简单的实现图片预览, 通过原生ajax以及 jQuery两种方法实现图片预览,有更好的办法可以留言喔................

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