獲取文件

在web中如想要獲取用戶計算機上的文件我們通常會用到的方法是通過一個表單元素<input type="file">操作用戶選擇的文件。

我們可以在js中通過監(jiān)聽該元素的change事件獲取到文件信息，通常文件會被存放在該元素的files集合中，例如：

<input type="file">
<script>
    const files = document.querySelector('input');
    files.addEventListener('change',(e)=>{
        console.log(e.target.files);
    })
</script>

File對象

File對象中主要有以下幾個常用的屬性，并且都是只讀屬性。

• name：在系統(tǒng)中的文件名。
• size：文件大小（單位為字節(jié)）。
• type：文件的MIME類型。
• lastModified：文件最后修改時間。

通過我們可以通過這些文件的基本信息對選擇的文件進行基本的過濾或是驗證，例如：

function validateFile(file){
    const maxSize = 1 * 1024 * 1024;
    const types = ['.jpg','.jpeg','.png','.bmp','.webp','.gif'];
    const fileName = file.name.toLowerCase();
    if(file.size > maxSize){
        alert('文件過大！');
        return false;
    }
    if(!types.some((item)=>fileName.endsWith(item))){
        alert('文件類型不匹配！');
        return false;
    }
    return true;
}
files.addEventListener('change',(e)=>{
    if(!validateFile(e.target.files[0])){
        e.target.value = '';
        return;
    }
    // 后續(xù)操作...
})

在以上代碼中我們通過一個函數(shù)來判斷我們選擇的一個文件是否符合要求以進行下一步操作，主要通過file對象上的屬性判斷了文件的大小和類型是否符合要求，通過不同函數(shù)我們可以過濾掉不符合我們預(yù)期的文件。

在File對象上是不包含文件的內(nèi)容信息的，但通常情況下我們獲取到File對象上文件信息的目的是要讀取到真實的文件數(shù)據(jù)信息，這時候就要借助另一個API：FileReader。

FileReader

FileReader是js中提供用于讀取文件數(shù)據(jù)的API，它可以從本地文件系統(tǒng)中讀取文件數(shù)據(jù)，其讀取過程是異步進行的。

FileReader對象的常用方法：

• readAsDataURL：這個方法可以讀取文件并將其內(nèi)容數(shù)據(jù)轉(zhuǎn)化為數(shù)據(jù)URL，結(jié)果存儲到FileReader實例的result屬性上。
• readAsText：讀取文件的純文本內(nèi)容，同樣結(jié)果存儲到FileReader實例的result屬性上。
• readAsBinaryString：讀取文件的二進制信息，同樣結(jié)果存儲到FileReader實例的result屬性上。

由于讀取文件的過程是異步的，所以我們主要是通過FileReader提供的監(jiān)聽事件來獲取文件的信息，常用的事件有三個：

• load：文件成功加載后觸發(fā)，此時可以通過result屬性獲取到文件信息。
• progress：文件讀取進度信息，每50ms觸發(fā)一次，屬性與XHR中的類似。
• error：文件讀取出錯時觸發(fā)，若error事件觸發(fā)則load事件將不會觸發(fā)。在error觸發(fā)后可以通過實例上的error屬性獲取到錯誤信息，其包含一個信息碼，代表的意思分別是:1（未找到文件）、2（安全錯誤）、3（讀取被中斷）、4（文件不可讀）、5（編碼錯誤）。

假設(shè)我們需要讀取一張圖片然后顯示到頁面中我們就可以進行如下操作：

const files = document.querySelector('input');
const img = document.querySelector('img');
files.addEventListener('change',(e)=>{
    let file = e.target.files[0];
    // 驗證文件基本信息
    if(!validateFile(file)){
        e.target.value = '';
        return;
    }
    let reader = new FileReader();
    reader.readAsDataURL(file); // 讀出文件信息并轉(zhuǎn)化為URL
    reader.addEventListener('load',(e)=>{
        console.log('文件加載完成');
        img.src = e.target.result; // 將URL賦予img元素,此時e.target為reader
    })

})

文件上傳

當我們在客戶端獲取到了文件后我們又將如何將文件上傳呢？將文件上傳至服務(wù)器，這必然就涉及到了網(wǎng)絡(luò)通信，而在js中進行網(wǎng)絡(luò)通信那自然就會用到ajax了。

利用XHR進行文件上傳

進行網(wǎng)絡(luò)通信，我們只要想到組成一個http報文就自然而然的指定該如何編寫代碼了，http請求主要包含了請求行、請求頭、請求體三部分信息。例如我需要實現(xiàn)以下http報文:

POST /upload HTTP/1.1
Host:127.0.0.1:5000
Content-Type: multipart/form-data;boundary=xxx

---xxx
Content-Disposition:form-data; name="xxhh";filename="bg.jpg"
Content-Type:image/jpeg

文件數(shù)據(jù)...
--xxx--

我們就可以通過以下js進行實現(xiàn)

const xhr = new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1:5000/upload');
const form = new FormData();
form.append('xxhh',file,'bg.jpg');
// 第一個參數(shù)對應(yīng)Content-Disposition中的name
// 第二個參數(shù)為文件數(shù)據(jù)(這里是文件真實的數(shù)據(jù)并非File對象)
// 第三個為Content-Disposition中的filename，默認為本地文件名
xhr.send(form);
xhr.onload = ()=>{
    console.log(xhr.responseText); //獲取到響應(yīng)結(jié)果
}

我們通過open構(gòu)造出請求頭信息，并通過FormData這個API讓我們更加簡單的編寫請求體信息， 它會自動將我們的請求頭信息設(shè)置為Content-Type: multipart/form-data;并自動生成一個boundary，使用append方法可向其添加一個要發(fā)送字段信息，最后調(diào)用xhr.send(form)將攜帶數(shù)據(jù)的請求發(fā)出。

以上就是JS獲取本地文件并進行網(wǎng)絡(luò)傳輸?shù)拇a詳解的詳細內(nèi)容，更多關(guān)于JS獲取本地文件并傳輸?shù)馁Y料請關(guān)注腳本之家其它相關(guān)文章！

最新評論