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

Posted 2020-11-12 PinkYun

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