html5中將圖片的絕對路徑轉換成檔案物件詳解-js教程-PHP中文網

首頁

web前端

js教程

html5中將圖片的絕對路徑轉換成檔案物件詳解

小云云

Jan 13, 2018 am 11:15 AM

h5html5路徑

本文主要介紹了html5中將圖片的絕對路徑轉換成文件物件,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

將圖片的絕對路徑轉換成base64編碼，請看這篇文章

我們先來理解基本知識點：

1. 理解HTML5中的FileList物件與file物件。

在HTML5中，FileList物件表示使用者選擇的檔案清單。透過新增multipe屬性，file控制項內允許一次選擇多個檔案。控制項內的每個使用者選擇的檔案都是一個file對象，而FileList對象則是file對象的列表。代表使用者選擇的所有文件。我們先來看一個簡單的demo，看下file檔案物件有哪些屬性。如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>filesystem:URL</title>
  </head>
  <body>
    <p>
      <label>选择：</label>
      <input type=&#39;file&#39; multiple id="file" />
      <input type="button" value="文件上传" onClick="showFile()" />
    </p>
    <script>
      function showFile() {
        var files = document.getElementById(&#39;file&#39;).files;  // 返回所有被选择的文件
        for (var i = 0, ilen = files.length; i < ilen; i++) {
          // 打印出单个文件对象的信息
          console.log(files[i]);
          /*  
           * 打印的信息如下：
           File {
            lastModified: 1457946612000
            lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {}
            name: "test.html"
            size: 796
            type: "text/html"
            webkitRelativePath: "" 
          */
          /*  如果上传的是一张图片的话，会返回如下信息的
            File {
              lastModified: 1466907500000
              lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {}
              name: "a.jpg"
              size: 23684
              type: "image/jpeg"
              webkitRelativePath: ""
            }
          */
          /*
           因此 如果需要判断该上传的文件是不是图像文件的话，可以根据type类型来判断如下：
           var file = files[i];
           if (!/image\/\w+/.test(file.type)) {
              console.log(&#39;该文件不是图像文件&#39;);
           } else {
              console.log(&#39;该文件是图像文件&#39;);
           }

           但是如果只让传图片的话，可以在image控件添加一个属性 accept="image/*" 即可；我们可以如下写代码：
           <input type=&#39;file&#39; multiple accept = &#39;image/gif,image/jpeg,image/jpg,image/png&#39; />
           */
        }
      }
    </script>
  </body>
</html>

2. 瞭解Blob物件

要點：在HTML5中，新增一個Blob對象，代表原始二進位數據，其實file物件也是繼承了Blob物件。

Blob物件有兩個屬性，size屬性表示一個Blob物件的位元組長度，type屬性表示Blob的MIME類型，如果是未知類型，則傳回一個空字串。

請看如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>filesystem:URL</title>
  </head>
  <body>
    <p>
      <label>选择文件：</label>
      <input type="file" id="file" />
      <input type="button" value="显示文件信息" onClick="showFileType()" />
      <p>文件字节长度: <span id="size"></span></p>
      <p>文件类型：<span id="type"></span></p>
    </p>
    <script>
      function showFileType() {
        var file;
        // 获取用户选择的第一个文件
        file = document.getElementById(&#39;file&#39;).files[0];
        var size = document.getElementById(&#39;size&#39;);
        var type = document.getElementById(&#39;type&#39;);
        // 显示文件字节的长度
        size.innerHTML = file.size;
        // 显示文件的类型
        type.innerHTML = file.type;

        // 打开控制台 查看返回的file对象
        console.log(file);
      }
    </script>
    
  </body>
</html>

注意：Blob和File是可以同時使用的，可以使用FileReader從Blob讀取資料。

下面是一段絕對路徑的圖片位址轉換為base64編碼的圖片，然後將base64編碼的圖片轉換成blob物件。程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <title>将以base64的图片url数据转换为Blob</title>
  </head>
  <body>
    <script>
      /**  
       * 将以base64的图片url数据转换为Blob  
       * @param urlData  
       * 用url方式表示的base64图片数据  
       */  
      function convertBase64UrlToBlob(base64){ 
        var urlData =  base64.dataURL;
        var type = base64.type;
        var bytes = window.atob(urlData.split(&#39;,&#39;)[1]); //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0  
        var ab = new ArrayBuffer(bytes.length);  
        var ia = new Uint8Array(ab);  
        for (var i = 0; i < bytes.length; i++) {  
            ia[i] = bytes.charCodeAt(i);  
        }  
        return new Blob( [ab] , {type : type});  
      }
      /* 
       * 图片的绝对路径地址 转换成base64编码 如下代码： 
       */
      function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return {
          dataURL: dataURL,
          type: "image/"+ext
        };
      }
      var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
      var image = new Image();
      image.crossOrigin = &#39;&#39;;
      image.src = img;
      image.onload = function(){
        var base64 = getBase64Image(image);
        console.log(base64);
        /*
         打印信息如下：
         {
          dataURL: "data:image/png;base64,xxx"
          type: "image/jpg"
         }
         */
        var img2 = convertBase64UrlToBlob(base64);
        console.log(img2);
        /*
         打印信息如下：
         Blob {size: 9585, type: "image/jpg"}
         */
      } 
    </script>
  </body>
</html>

注意：在HTML5中，新增一個Blob對象，代表原始二進位數據，其實file物件也是繼承了Blob物件。因此我們可以使用圖片的絕對位址轉換成檔案物件。

因此我們可以使用絕對地址的圖片轉換成file文件對象，詳細的demo可以看我git上圖片上傳控件，該插件先是圖片上傳支持，然後突然發現到編輯頁面的時候，需要顯示預設的圖片，也可以同時支援在預設顯示圖片的情況下繼續上傳新圖片，或者刪除所有的圖片，但是開發人員給我的只有圖片的絕對地址，所以就一直想透過圖片的絕對地址如何轉換成file對象，如果不轉換成file對象的話，使用這句代碼的時候var reader = new FileReader(); 會報錯，因此可以使用我們上面講的blob對像先轉換成blob對象，然後就可以使用文件操作對象fileReader。

相關推薦：

Javascript將圖片的絕對路徑轉換為base64編碼

html的絕對路徑和相對路徑怎麼使用

HTML相對路徑與絕對路徑差異詳細分析

以上是html5中將圖片的絕對路徑轉換成檔案物件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles