關於前端上傳文件全面基礎掃盲貼(二) ----- File

時間 2020-01-17

標籤關於前端上傳文件全面基礎掃盲 file 简体版

原文原文鏈接

系列文章

關於前端上傳文件全面基礎掃盲貼(零)
關於前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest
關於前端上傳文件全面基礎掃盲貼(二) ----- File
關於前端上傳文件全面基礎掃盲貼(三) ----- FormData
關於前端上傳文件全面基礎掃盲貼(四) ----- FileReader
關於前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件
 關於前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)javascript

File API(知識點主要來源於關於File API)

在以前咱們操做本地文件都是使用flash、silverlight或者第三方的activeX插件等技術，因爲使用了這些技術後就很難進行跨平臺、或者跨瀏覽器、跨設備等狀況下實現統一的表現，從另一個角度來講就是讓咱們的web應用依賴了第三方的插件，而不是很獨立。爲了解救上面說到的問題,File API 是 Mozilla 向 W3C 提交的一個草案，旨在推出一套標準的 JavaScript API，其基本功能是實現用 JavaScript 對本地文件進行操做。出於安全性的考慮，該 API 只對本地文件提供有限的訪問。有了它，咱們就能夠很輕鬆的用純 JavaScript 來實現本地文件的讀取和上傳了。html

先來看看瀏覽器的支持程度(舒適提示:下圖只表明支持程度,支持歸支持,不必定百分百支持,因此用到部分方法時不兼容時正常的)

File對象能夠用來獲取某個文件的信息,還能夠用來讀取這個文件的內容.一般狀況下,File對象是來自用戶在一個<input>元素上選擇文件後返回的FileList對象,也能夠是來自由拖放操做生成的 DataTransfer對象.看看實際例子前端

<!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <p>Upload File: <input type="file" name="file" id='file' onchange="upload()"/></p>
    <script type="text/javascript">
      function upload() {
        console.log(document.getElementById('file').files[0])
      }
    </script>
  </body>

</html>

大家能夠複製到本地去試試,上傳以後會出現一個對象,也就是咱們此次講的內容:
java

屬性	描述
lastModifiedDate	返回當前文件的最後修改日期,若是沒法獲取到文件的最後修改日期,則使用當前日期來替代
lastModified	文檔沒看到,我大膽猜想,是上面屬性的時間戳形式
name	返回文件的名稱.因爲安全緣由,返回的值並不包含文件路徑
size	對於文件,以字節爲單位返回指定文件的大小.對於文件夾,以字節爲單位返回文件夾中包含的全部子文件夾中的全部文件和子文件夾的大小
type	類型
webkitRelativePath	這個比較蒙,估計是部分路徑,詳情查閱請狠狠地點擊英文論壇哦