<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [TOC] * * * * * [參考文章](https://javascript.ruanyifeng.com/htmlapi/file.html#toc3) ### `FileReader` API `FileReader` 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件(或原始數據緩沖區)的內容,它的參數是 `File` 或 `Blob` 對象。[傳送門](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader) 其中`File`對象可以是來自用戶在一個 `<input>`元素上選擇文件后返回的`FileList`對象,也可以來自拖放操作生成的`DataTransfer`對象,還可以是來自在一個`HTMLCanvasElement`上執行`mozGetAsFile()`方法后返回結果。 該API 的兼容性 [查看FileReader兼容性](https://caniuse.com/#search=FileReader) #### 1、 `FileReader` 的讀取文件的方法 - `readAsBinaryString(Blob|File)`:返回二進制字符串,該字符串每個字節包含一個0到255之間的整數。 - `readAsText(Blob|File, opt_encoding)`:返回文本字符串。默認情況下,文本編碼格式是’UTF-8’,可以通過可選的格式參數,指定其他編碼格式的文本。 - `readAsDataURL(Blob|File)`:返回一個基于Base64編碼的data-uri對象。 - `readAsArrayBuffer(Blob|File)`:返回一個ArrayBuffer對象。 - `abort()` 中斷讀取 FileReader 的實例擁有 4 個方法,其中 3 個用以讀取文件,另一個用來中斷讀取。需要注意的是 ,無論讀取成功或失敗,方法并不會返回讀取結果,這一結果存儲在 result屬性中。 #### 2、 `FileReader` 的事件 - `onabort`方法:讀取中斷或調用reader.abort()方法時觸發。 - `onerror`方法:讀取出錯時觸發。 - `onload`方法:讀取成功后觸發。 - `onloadend`方法:讀取完成后觸發,不管是否成功。觸發順序排在 onload 或 onerror 后面。 - `onloadstart`方法:讀取將要開始時觸發。 - `onprogress`方法:讀取過程中周期性觸發。 文件一旦開始讀取,無論成功或失敗,實例的 result 屬性都會被填充。如果讀取失敗,則 result 的值為 null ,否則即是讀取的結果,絕大多數的程序都會在成功讀取文件的時候,抓取這個值 #### 3. `FileReader` 的用法 當文件讀取時,會觸發響應的事件,我們可以從事件對象中獲取文件流的一些信息,并且文件讀取的結果會儲存在result這個屬性中。需要注意的是,讀取文件的方法不能同時進行。 ```JavaScript let inp = document.getElementById('file') inp.onchange = function(e){ let file = e.target.files[0] let fileReader = new FileReader() //返回二進制字符串,該字符串每個字節包含一個0到255之間的整數。 fileReader.readAsBinaryString(file) // fileReader.readAsText(file) // fileReader.readAsDataURL(file) // fileReader.readAsArrayBuffer(file) fileReader.onload = function(reesult){ console.log(e) } fileReader.onprogress = function(e){ console.log(e) } } ``` ### Image 對象 [參考文章](http://javascript.ruanyifeng.com/dom/image.html) #### 1. Image的使用 `<img>`元素用于插入圖片,主要繼承了 HTMLImageElement 接口。 瀏覽器提供一個原生構造函數Image,用于生成HTMLImageElement實例。 ```JavaScript var img = new Image(); img instanceof Image // true img instanceof HTMLImageElement // true ``` `Image`構造函數可以接受兩個整數作為參數,分別表示`<img>`元素的寬度和長度。 ```JavaScript // 語法 Image(width, height) // 用法 var myImage = new Image(100, 200); ``` #### 2. Image的一些屬性 > HTMLImageElement.src屬性返回圖像的完整網址。 > HTMLImageElement.currentSrc屬性返回當前正在展示的圖像的網址。JavaScript 和 CSS 的 mediaQuery 都可能改變正在展示的圖像。 > HTMLImageElement.alt屬性可以讀寫<img>的 HTML 屬性alt,表示對圖片的文字說明。 > HTMLImageElement.isMap屬性對應<img>元素的 HTML 屬性ismap,返回一個布爾值,表示圖像是否為服務器端的圖像映射的一部分。 > HTMLImageElement.useMap屬性對應<img>元素的 HTML 屬性usemap,表示當前圖像對應的<map>元素。 > HTMLImageElement.srcset屬性 讀寫<img>元素的srcset屬性 > HTMLImageElement.sizes屬性 讀寫sizes屬性 > HTMLImageElement.naturalWidth屬性和HTMLImageElement.naturalHeight屬性 分別返回圖像的實際寬度和高度 > HTMLImageElement.width和HTMLImageElement.height 返回img屬性中的width和height 如果沒有則返回圖像的實際寬度和高度 > HTMLImageElement.complete屬性返回一個布爾值,表示圖表是否已經加載完成。如果<img>元素沒有src屬性,也會返回true。 > HTMLImageElement.crossOrigin屬性用于讀寫<img>元素的crossorigin屬性,表示跨域設置。這個屬性有兩個可能的值:anonymous:跨域請求不要求用戶身份(credentials),這是默認值;use-credentials:跨域請求要求用戶身份。 > HTMLImageElement.referrerPolicy用來讀寫<img>元素的 HTML 屬性referrerpolicy,表示請求圖像資源時,如何處理 HTTP 請求的referrer字段。 > HTMLImageElement.x屬性返回圖像左上角相對于頁面左上角的橫坐標,HTMLImageElement.y屬性返回縱坐標。 #### 3. Image的事件 圖像加載完成會觸發 onload 事件, 加載失敗會觸發 onerror 事件, 需要注意的是在Image 未加載完成前,是訪問不到他的一些屬性(比如寬,高等)的 ```JavaScript let img = new Image() img.src = "http://www.webxiaoma.com/assets/images/manong.jpg" img.onload = function(){ console.log(img.width) console.log(img.height) } ``` ### FormData 對象 > XMLHttpRequest Level2添加了一個新的接口FormData. 利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件. FormData對象的操作方法,全部在原型中,自己本身沒任何的屬性及方法。 > append(key,value) 方法向 formData 添加key/value > delete(key) 方法刪除指定的key > entries() 方法返回一個迭代器,允許遍歷該對象中包含的所有鍵/值對 > forEach() 方法遍歷formData key/value并執行回調函數 > get(key) 方法獲取指定key的值 > getAll(key) 方法獲取指定key下邊的所有值 > has(key) 方法判斷某個key是否存在formData中 > keys() 方法返回一個迭代器,允許遍歷該對象中包含的鍵/值對的所有鍵 > set(key,value) 在FormData對象中設置一個現有鍵的新值,或者在不存在的情況下添加鍵/值 > values() 方法返回一個迭代器,允許遍歷該對象中包含的鍵/值對的所有值 ```JavaScript let formData = new FormData() formData.append('name','King') formData.append('age',12) formData.append('name','hong') formData.get('name') // King formData.getAll('name') //["King", "hong"] ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看