原生JS實(shí)現(xiàn)前端本地文件上傳

2019-01-08

編程之家

https://www.jb51.cc

編程之家收集整理的這篇文章主要介紹了原生JS實(shí)現(xiàn)前端本地文件上傳，編程之家小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

本文實(shí)例為大家分享了JS實(shí)現(xiàn)前端本地文件上傳的具體代碼，供大家參考，具體內(nèi)容如下

通過(guò)input type = file來(lái)選擇本地文件

文件名:',this.value)

var formData = new FormData(this.form);

console.log(formData)

}

//打印出的結(jié)果是文件名: C:\fakepath\css.jpg然后在是一個(gè)空對(duì)象

使用formData無(wú)法得到文件的內(nèi)容，那么就使用FileReader來(lái)讀取整個(gè)文件的內(nèi)容

從打印結(jié)果來(lái)看，能清楚的知道上傳的文件信息是在

input type = ‘file'dom對(duì)象中的files[0]中。

filereader.readAsDataURL是將flies[0]里的信息轉(zhuǎn)換成base64方式讀取。

filereader的讀取為以下格式：

readAsDataURL(this.files[0]) base64位讀取

readAsBinaryString(this.files[0]) 以二進(jìn)制方式讀取讀取結(jié)果是UTF-8形式(被廢棄)

readAsArrayBuffer(this.flies[0]) 以二進(jìn)制原始方法讀取，讀取結(jié)果可轉(zhuǎn)換成整數(shù)的數(shù)組

文件選擇框選擇的文件對(duì)象數(shù)組

if(files.length == 0) return;

var form = new FormData(),url = 'http://.......',//服務(wù)器上傳地址

file = files[0];

form.append('file',file);

var xhr = new XMLHttpRequest();

xhr.open("post",url,true);

//上傳進(jìn)度事件

xhr.upload.addEventListener("progress",function(result) {

if (result.lengthComputable) {

//上傳進(jìn)度

var percent = (result.loaded / result.total * 100).toFixed(2);

}

},false);

xhr.addEventListener("readystatechange",function() {

var result = xhr;

if (result.status != 200) { //error

console.log('上傳失敗',result.status,result.statusText,result.response);

}

else if (result.readyState == 4) { //finished

console.log('上傳成功',result);

}

});

xhr.send(form); //開始上傳

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持編程之家。

總結(jié)

以上是編程之家為你收集整理的原生JS實(shí)現(xiàn)前端本地文件上傳全部?jī)?nèi)容，希望文章能夠幫你解決原生JS實(shí)現(xiàn)前端本地文件上傳所遇到的程序開發(fā)問(wèn)題。

如果覺得編程之家網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將編程之家網(wǎng)站推薦給程序員好友。

本圖文內(nèi)容來(lái)源于網(wǎng)友網(wǎng)絡(luò)收集整理提供，作為學(xué)習(xí)參考使用，版權(quán)屬于原作者。

總結(jié)

以上是生活随笔為你收集整理的本地js文件上传服务器,原生JS实现前端本地文件上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。