码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-07 21:53:42      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:简单的   NPU   echo   post   javascrip   pos   表单   使用   min   

1.原生写ajax实现图片预览:

  结构: 

         <input type="file">
      <img src="" >
 
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  

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

标签:简单的   NPU   echo   post   javascrip   pos   表单   使用   min   

原文地址:https://www.cnblogs.com/PinkYun/p/9152771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!