使用ajax 2.0结合JQ实现文件预览效果,兼容性较好推荐使用

最新推荐文章于 2022-11-09 17:21:38 发布

江流儿1314

最新推荐文章于 2022-11-09 17:21:38 发布

阅读量188

点赞数

文章标签：使用ajax 2.0结合JQ实现文件预览效果兼容性较好推荐

本文链接：https://blog.csdn.net/qq_37011771/article/details/80579699

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='../assets/vendors/jquery/jquery.js'></script>
</head>
<body>
    <input id="avatar" name="avatar" type="file">
    <img src="">
</body>
<script>
    $(function(){
    
    //兼容性不好
    // $("#avatar").change(function(){
    // var resultURL=URL.createObjectURL(this.files[0]);
    
    // $(this).next('img').attr('src',resultURL);
    
    // })
    //使用ajax兼容更高的版本,实现图片预览,兼容性较好,推荐使用
    //change 当表单元素的value值发生改变时就会触发.
    $("#avatar").change(function(){
    
      var sendData = new FormData();
      sendData.append('preview',this.files[0]);
      $.ajax({
        url:'http://www.baixiu.com/admin/API/06.savePreviewImg.php',
        data:sendData,
        type:'post',
        contentType:false,
        processData:false,
        success:function(backData){
          $("#avatar").next('img').attr('src',backData.url).fadeIn();
        }
      })
    })
      })
    </script>
</html>

接口函数代码为

   请求地址: 
 
   http://www.baixiu.com/admin/API/06.savePreviewImg.php 
 
   请求方法:post 
 
   请求的参数: 
 
   preview:上传的文件 
 
   返回的数据格式 
 
   {url:'图片地址'}

后端代码:

 
  <?php 
 
  // 设置格式json 
 
  header( 
  ' 
  content-type:application/json;charset=utf-8 
  '); 
 
  // // 引入函数 
 
  // include '../../tools/tools.php'; 
 
  // 接收文件(写死的文件名) 自己封装的函数 会保存文件原始的名字 
 
  // my_move_upload_file('preview','../../uploads/'); 
 
  move_uploaded_file($_FILES[ 
  ' 
  preview 
  '][ 
  ' 
  tmp_name 
  '], 
  ' 
  ../../uploads/preview.jpg 
  '); 
 
  // 返回图片地址 拼接上一个时间戳,解决占用服务器内存问题 
 
  // echo '../../uploads/preview.jpg?'.time(); 
 
   $backData 
  = 
  array( 
  ' 
  url 
  ' 
  => 
  ' 
  ../../uploads/preview.jpg? 
  ' 
  . 
  time()); 
 
  echo 
  json_encode($backData); 
 
  ? 
  >

江流儿1314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ajax 2.0结合JQ实现文件预览效果,兼容性较好推荐使用

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫