简单的实现图片预览, 通过原生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]);![](https://images2018.cnblogs.com/blog/1361006/201806/1361006-20180607205412398-892239285.png)
![](https://images2018.cnblogs.com/blog/1361006/201806/1361006-20180607205412398-892239285.png)
//设置请求主体
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代码:
新建一个保存图片的文件,icon
<?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'];
?>