三种预览图片的方法

三种方式,前面两种直接在本地预览图片,第三种方式需要通过服务器来获取图片

但存在兼容性问题,不兼容ie8

下面分别是html,js和php的内容


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form>
    <input type="file" name="icon">
    <img src="" alt="">
  </form>
</body>
</html>

　js部分

  // 预览图片的三种方法

  // 方法一:创建url连接
  // input标签改变时触发事件,querySelector是h5c3出的属性选择器
  document.querySelector("input[type=file]").onchange = function(){
    // 获取文件对象
    var file =this.files[0];

    // 创建文件链接
    var url = URL.createObjectURL(file);

    // 将路径赋值给img标签
    document.querySelector("img").src=url;
    
  }

  // 方法二:解析文件转码为base64
  // input标签改变时触发事件
  document.querySelector("input[type=file]").onchange = function(){
    // 获取文件对象
    var file =this.files[0];

    // 创建读取对象
    var reader = new FileReader();

    // 解析文件对象
    reader.readAsDataURL(file);

    // 解析完成,回调函数
    reader.onload = function (){
      // 将文件对象解析成base64编码
      var url = reader.result;
           
      // 将解析的数据结果赋值给img标签
      document.querySelector("img").src=url;
    }
    
  }

    // 方法三:通过ajax将文件上传给后台php,后台保存文件,并生成路径,在回调函数中获取路径
     document.querySelector("input[type=file]").onchange = function () {
      // xhr 2.0 配合form,发送图片文件
      var sendDate = new FormData(document.querySelector("form"));
       
      // ajax发送文件
      // 创建请求对象
      var xhr = new XMLHttpRequest();

      // 请求行
      xhr.open("post","xxx.php");

      // 回调函数
      xhr.onload = function() {
        // json格式转成普通格式
        var backData = JSON.parse(xhr.responseText);
        
        //  将解析的数据结果赋值给img标签
         document.querySelector("img").src="./img/"+backData.name;
      }

      // 发送请求主体
      xhr.send(sendDate);

     }

　php内容

<?php
header("Access-Control-Allow-Origin:*");

  // icon是input标签的name,将文件保存根目录
  //由于window的字符集编码默认是gbk,而html和php的字符集编码默认是utf-8,因此存文件需要转码 
  $name = $_FILES["icon"]["name"];
  $name = iconv("utf-8","gbk",$name);
  move_uploaded_file($_FILES["icon"]["tmp_name"],"./img/".$name);

  // 这个name是utf-8编码的
  $name = $_FILES["icon"]["name"];
  
  echo json_encode(array(
   "name" => $name
  ))

 ?>