這篇文章主要介紹“web前端怎么上傳文件”，在日常操作中，相信很多人在web前端怎么上傳文件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web前端怎么上傳文件”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、營山網(wǎng)站維護(hù)、網(wǎng)站推廣。
上傳文件
項(xiàng)目中會有很多文件上傳的需求，例如：頭像上傳、表格文件、word文檔等…
上傳必備表單元素：
進(jìn)行文件上傳的時候，
1.表單必須是post請求
2.表單必須聲明不要對數(shù)據(jù)進(jìn)行編碼 - enctype=multipart/form-data
傳送數(shù)據(jù)的格式就是鍵值對的形式，且數(shù)據(jù)都是js的數(shù)據(jù)類型，但文件進(jìn)行傳輸?shù)臅r候，只有兩種形式去傳輸：
以字符串的形式去描述一個文件
以文件流的形式去描述一個文件
傳統(tǒng)開發(fā)模式上傳
前后端混在一起開發(fā)
傳統(tǒng)開發(fā)模式的上傳需要將表單中選擇的文件傳送給后端，讓后端做上傳：
此時的表單中必須有enctype這個屬性，這個屬性的說明如下圖：
點(diǎn)擊上傳按鈕后，后端對文件進(jìn)行上傳處理，以php為例：
echo "上傳文件名: " . $_FILES["avatar"]["name"] . "
"; 上傳文件的名稱
echo "文件類型: " . $_FILES["avatar"]["type"] . "
"; 上傳文件的類型
echo "文件大小: " . ($_FILES["avatar"]["size"] / 1024) . " kB
"; 上傳文件的大小，以字節(jié)計(jì)
echo "文件臨時存儲的位置: " . $_FILES["avatar"]["tmp_name"]; 存儲在服務(wù)器的文件的臨時副本的名稱
echo $_FILES["file"]["error"] 由文件上傳導(dǎo)致的錯誤代碼
將文件保存到服務(wù)器中：
move_uploaded_file($_FILES["avatar"]["tmp_name"], "upload/" . $_FILES["avatar"]["name"]);
echo "文件存儲在: " . "upload/" . $_FILES["avatar"]["name"];
在實(shí)際開發(fā)中，為了提高效率，通常都會使用前后端分離開發(fā)。
前后端分離上傳
前端做前端，后端做后端，最終使用接口文檔對接 - 核心技術(shù)是 ajax
前后端分離開發(fā)，應(yīng)用的主要技術(shù)就是ajax。上傳同樣可以使用ajax來上傳。
FormData是js內(nèi)置的一個構(gòu)造函數(shù)，構(gòu)造出來的對象可以識別文件信息。
使用方式：
構(gòu)造FormData對象，將文件信息添加到FormData對象中，然后上傳。
文件信息在文件選擇控件中：表單.files
例：
FormData對象有一個特點(diǎn)，將文件信息添加進(jìn)去后，直接打印不能看到文件信息，需要使用for of遍歷才能看到：
var formdata = new FormData();var fileinfo = document.querySelector('[type="file"]').files[0];formdata.append('avatar',fileinfo) / 將文件信息添加到FormData對象中
console.log(formdata)for(var v of formdata){
console.log(v)}
FormData對象中也可以添加別的數(shù)據(jù)，進(jìn)行一起提交：
formdata.append('avatar',fileinfo)formdata.append('age',12)for(var v of formdata){
console.log(v)}
從FormData對象中刪除一個數(shù)據(jù)，使用：
formdata.delete(鍵)
有時候，我們在一個表單中需要上傳多個文件，此時，F(xiàn)ormData中可以不用追加一個文件信息，可以在構(gòu)造FormData對象的時候，將整個表單對象傳入，他會自動識別所有數(shù)據(jù)：
當(dāng)使用FormData上傳的時候，將FormData對象當(dāng)做數(shù)據(jù)傳入，不需要修改請求頭，瀏覽器會自動修改。
此時已經(jīng)實(shí)現(xiàn)了前后端分離上傳了，但是正常項(xiàng)目中都會有一個預(yù)覽圖片的功能。
我們可以讓后端在實(shí)現(xiàn)上傳后，將上傳以后的文件名稱傳送給前端，讓前端渲染返回的圖片路徑。
但這樣是在上傳以后預(yù)覽的，假設(shè)我們選擇了文件以后，就想看看這個文件是否要上傳，也就是在上傳之前要預(yù)覽的話，還是沒有辦法實(shí)現(xiàn)。
我們可以利用H5提供的FileReader來讀取文件并預(yù)覽，然后決定是否要上傳。
ajax上傳
ajax進(jìn)行上傳后
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status>=200 && xhr.status<300){
var res = xhr.responseText;
// console.log(res);
if(res==1){
alert('上傳成功')
location.reload()
}
}
}
}
xhr.open('post','2-upload.php')將文件數(shù)據(jù)放在send中進(jìn)行傳送
需要借助H5提供的構(gòu)造函數(shù)FormData - 用來識別文件信息
var fd = new FormData()
將文件信息放在fd這個對象中 - 用fd的append方法
文件信息在哪里？
var file = document.querySelector('[type="file"]')
// console.dir(file);
var fileinfo = file.files[0] / 文件信息append方法，是將文件放入這個對象中，對象就需要鍵值對，參數(shù)1是鍵，參數(shù)2是文件信息
fd.append('avatar',fileinfo)fd有一個特性，就是直接打印他， 看不到其中的內(nèi)容 需要遍歷才能看到其中的數(shù)據(jù) - 必須使用 for of
for(var value of fd){
console.log(value);
}fd除了能添加文件信息，還可以添加數(shù)據(jù)
fd.append('username',document.querySelector('[name="username"]').value)上傳文件的時候，利用FormData，里面就有了數(shù)據(jù)和文件信息，其實(shí)最終文件和數(shù)據(jù)以二進(jìn)制數(shù)據(jù)流進(jìn)行傳送的，不需要設(shè)置請求頭，因?yàn)閍jax會自動調(diào)整
文件數(shù)據(jù)其實(shí)就是fd
php：
現(xiàn)在能打印出數(shù)據(jù)，文件存到了臨時目錄中
上傳就是將臨時文件移動到服務(wù)器中
header("content-type:text/html;charset=utf8");echo "";print_r($_FILES);move_uploaded_file($_FILES['avatar']['tmp_name'],'./upload/'.$_FILES['avatar']['name']);// echo '上傳成功';echo './upload/'.$_FILES['avatar']['name'];
echo "
答案：1 3 9 12 4 10 2 11 5 6 8 7
到此，關(guān)于“web前端怎么上傳文件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
網(wǎng)頁題目：web前端怎么上傳文件
本文URL：http://weahome.cn/article/jeospp.html
重慶分公司
重慶分公司
