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