資訊專欄INFORMATION COLUMN
摘要：為了解救上面說到的問題是向提交的一個(gè)草案，旨在推出一套標(biāo)準(zhǔn)的，其基本功能是實(shí)現(xiàn)用對本地文件進(jìn)行操作。出于安全性的考慮，該只對本地文件提供有限的訪問。
系列文章
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(四) ----- FileReader
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(五) ----- H5拖拽事件
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(六) ----- 圖片上傳,旋轉(zhuǎn),重繪,預(yù)覽等實(shí)戰(zhàn)(附DEMO)
在之前我們操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技術(shù)，由于使用了這些技術(shù)后就很難進(jìn)行跨平臺、或者跨瀏覽器、跨設(shè)備等情況下實(shí)現(xiàn)統(tǒng)一的表現(xiàn)，從另外一個(gè)角度來說就是讓我們的web應(yīng)用依賴了第三方的插件，而不是很獨(dú)立。 為了解救上面說到的問題,File API 是 Mozilla 向 W3C 提交的一個(gè)草案，旨在推出一套標(biāo)準(zhǔn)的 JavaScript API，其基本功能是實(shí)現(xiàn)用 JavaScript 對本地文件進(jìn)行操作。出于安全性的考慮，該 API 只對本地文件提供有限的訪問。有了它，我們就可以很輕松的用純 JavaScript 來實(shí)現(xiàn)本地文件的讀取和上傳了。
先來看看瀏覽器的支持程度(溫馨提示:下圖只代表支持程度,支持歸支持,不一定百分百支持,所以用到部分方法時(shí)不兼容時(shí)正常的)
File對象可以用來獲取某個(gè)文件的信息,還可以用來讀取這個(gè)文件的內(nèi)容.通常情況下,File對象是來自用戶在一個(gè)元素上選擇文件后返回的FileList對象,也可以是來自由拖放操作生成的 DataTransfer對象.看看實(shí)際例子
Upload File:
你們可以復(fù)制到本地去試試,上傳之后會出現(xiàn)一個(gè)對象,也就是我們這次講的內(nèi)容:
| 屬性 | 描述 |
|---|---|
| lastModifiedDate | 返回當(dāng)前文件的最后修改日期,如果無法獲取到文件的最后修改日期,則使用當(dāng)前日期來替代 |
| lastModified | 文檔沒看到,我大膽猜測,是上面屬性的時(shí)間戳形式 |
| name | 返回文件的名稱.由于安全原因,返回的值并不包含文件路徑 |
| size | 對于文件,以字節(jié)為單位返回指定文件的大小.對于文件夾,以字節(jié)為單位返回文件夾中包含的所有子文件夾中的所有文件和子文件夾的大小 |
| type | 類型 |
| webkitRelativePath | 這個(gè)比較蒙,估計(jì)是部分路徑,詳情查閱請狠狠地點(diǎn)擊英文論壇哦 |
還有挺多屬性,不過沒用到,有興趣可以看看，詳情查閱請狠狠地點(diǎn)擊Javascript--File對象
暫時(shí)就介紹到這里,然后你會發(fā)現(xiàn)這都是些上傳信息,有什么用?(給點(diǎn)小提示先:過濾上傳類型，限制大小，斷點(diǎn)續(xù)傳等都能用到)
沒錯(cuò),用處不大,因?yàn)檫€需要用到其他的東西
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106297.html
摘要：二編輯合成照片使用編輯壓縮重設(shè)尺寸比例轉(zhuǎn)成輸出預(yù)覽。三保存并上傳照片提交數(shù)據(jù)到服務(wù)器需要服務(wù)器支持我跳過了。數(shù)據(jù)主要來自拍攝的照片，多用于移動端開發(fā)，端也會用到，此插件兼容主流瀏覽器，以下不支持。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端...
摘要：如果是傳入三個(gè)參數(shù)的方式，那么該值將是一個(gè)布爾值，文件，或者一個(gè)，如果不是，將被轉(zhuǎn)成一個(gè)字符串可選傳給服務(wù)器的文件名稱一個(gè)。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData關(guān)于前端上傳文...
摘要：沒有瀏覽器測試，所以不知道是不是有效，其實(shí)里面看起來比我寫的那個(gè)復(fù)雜，實(shí)際上多了個(gè)檢驗(yàn)格式上兼容寫法所以不要怕，如果我錯(cuò)了記得提醒下我啊。目前為止其實(shí)已經(jīng)該說的都差不多覆蓋到了吧，動手能力強(qiáng)的話已經(jīng)可以根據(jù)教程寫一個(gè)實(shí)例出來的了。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(...
摘要：在中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式方法。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(...
摘要：表單用于向服務(wù)器傳輸數(shù)據(jù)。屬性對象的屬性指定了一個(gè)事件句柄函數(shù)。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。詳情查閱請狠狠地點(diǎn)擊關(guān)于對象代表表單中的一個(gè)提交按鈕在表單提交之前，觸發(fā)事件句柄，并且一個(gè)句柄可以通過返回來取消表單提交。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) -...
閱讀 2711·2023-04-25 20:28
閱讀 1900·2021-11-22 09:34
閱讀 3731·2021-09-26 10:20
閱讀 1890·2021-09-22 16:05
閱讀 3119·2021-09-09 09:32
閱讀 2558·2021-08-31 09:40
閱讀 2142·2019-08-30 13:56
閱讀 3345·2019-08-29 17:01
