三種預覽圖片的方法

時間 2019-11-24

標籤三種預覽圖片方法简体版

原文原文鏈接

三種方式,前面兩種直接在本地預覽圖片,第三種方式須要經過服務器來獲取圖片php

但存在兼容性問題,不兼容ie8html

下面分別是html,js和php的內容ajax


<!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部分json

  // 預覽圖片的三種方法

  // 方法一:建立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 )) ?>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。