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

scola666 發(fā)布于2019-08-26 10:31 / 2357人閱讀

摘要：為了解救上面說到的問題是向提交的一個草案，旨在推出一套標準的，其基本功能是實現(xiàn)用對本地文件進行操作。出于安全性的考慮，該只對本地文件提供有限的訪問。

系列文章

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

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

在之前我們操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技術，由于使用了這些技術后就很難進行跨平臺、或者跨瀏覽器、跨設備等情況下實現(xiàn)統(tǒng)一的表現(xiàn)，從另外一個角度來說就是讓我們的web應用依賴了第三方的插件，而不是很獨立。為了解救上面說到的問題,File API 是 Mozilla 向 W3C 提交的一個草案，旨在推出一套標準的 JavaScript API，其基本功能是實現(xiàn)用 JavaScript 對本地文件進行操作。出于安全性的考慮，該 API 只對本地文件提供有限的訪問。有了它，我們就可以很輕松的用純 JavaScript 來實現(xiàn)本地文件的讀取和上傳了。

先來看看瀏覽器的支持程度(溫馨提示:下圖只代表支持程度,支持歸支持,不一定百分百支持,所以用到部分方法時不兼容時正常的)

File對象可以用來獲取某個文件的信息,還可以用來讀取這個文件的內(nèi)容.通常情況下,File對象是來自用戶在一個元素上選擇文件后返回的FileList對象,也可以是來自由拖放操作生成的 DataTransfer對象.看看實際例子

Upload File:

你們可以復制到本地去試試,上傳之后會出現(xiàn)一個對象,也就是我們這次講的內(nèi)容:

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

還有挺多屬性,不過沒用到,有興趣可以看看，詳情查閱請狠狠地點擊Javascript--File對象
暫時就介紹到這里,然后你會發(fā)現(xiàn)這都是些上傳信息,有什么用?(給點小提示先:過濾上傳類型，限制大小，斷點續(xù)傳等都能用到)
沒錯,用處不大,因為還需要用到其他的東西

GPU云服務器云服務器服務器掃盲貼 js_file分段上傳關于前端關于前端開發(fā)

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106297.html

關于前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(zhàn)(附DEMO)

摘要：二編輯合成照片使用編輯壓縮重設尺寸比例轉成輸出預覽。三保存并上傳照片提交數(shù)據(jù)到服務器需要服務器支持我跳過了。數(shù)據(jù)主要來自拍攝的照片，多用于移動端開發(fā)，端也會用到，此插件兼容主流瀏覽器，以下不支持。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端...

lmxdawn 2019-08-26 10:31 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(三) ----- FormData

摘要：如果是傳入三個參數(shù)的方式，那么該值將是一個布爾值，文件，或者一個，如果不是，將被轉成一個字符串可選傳給服務器的文件名稱一個。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- FormData關于前端上傳文...

developerworks 2019-08-26 10:30 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(四) ----- FileReader

摘要：沒有瀏覽器測試，所以不知道是不是有效，其實里面看起來比我寫的那個復雜，實際上多了個檢驗格式上兼容寫法所以不要怕，如果我錯了記得提醒下我啊。目前為止其實已經(jīng)該說的都差不多覆蓋到了吧，動手能力強的話已經(jīng)可以根據(jù)教程寫一個實例出來的了。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(...

Tony 2019-08-26 10:31 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件

摘要：在中，拖放是標準的一部分，任何元素都能夠拖放。如果需要設置允許放置，我們必須阻止對元素的默認處理方式方法。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- FormData關于前端上傳文件全面基礎掃盲貼(...

iKcamp 2019-08-26 10:31 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(零)

摘要：表單用于向服務器傳輸數(shù)據(jù)。屬性對象的屬性指定了一個事件句柄函數(shù)。標簽的屬性應當與相關元素的屬性相同。詳情查閱請狠狠地點擊關于對象代表表單中的一個提交按鈕在表單提交之前，觸發(fā)事件句柄，并且一個句柄可以通過返回來取消表單提交。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) -...

SnaiLiu 2019-08-02 15:42 評論0 收藏0