用于web開發的文件上傳怎么實現

這篇“用于web開發的文件上傳怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“用于web開發的文件上傳怎么實現”文章吧。

　　文件上傳是Web開發常見需求，上傳文件需要用到文件輸入框，如果給文件輸入框添加一個multiple屬性則可以一次選擇多個文件（不支持的瀏覽器會自動忽略這個屬性）

　　<inputmultipletype="file">

　　點擊這個輸入框就可以打開瀏覽文件對話框選擇文件了，一般一個輸入框上傳一個文件就行，要上傳多個文件也可以用多個輸入框來處理，這樣做是為了兼容那些不支持multiple屬性的瀏覽器，同時用戶一般也不會選擇多個文件

　　基本上傳方式

　　當把文件輸入框放入表單中，提交表單的時候即可將選中的文件一起提交上傳到服務器，需要注意的是由于提交的表單中包含文件，因此要修改一下表單元素的enctype屬性為multipart/form-data

　　<formaction="#"enctype="multipart/form-data"method="post">

　　<inputname="file"type="file">

　　<buttontype="submit">Upload</button>

　　</form>

　　這樣上傳方式是傳統的同步上傳，上傳的文件如果很大，往往需要等待很久，上傳完成后頁面還會重新加載，并且必須等待上傳完成后才能繼續操作

　　早期的瀏覽器并不支持異步上傳，不過可以使用iframe來模擬，在頁面中隱藏一個<iframe>元素，指定一個name值，同時將<form>元素的target屬性值指定為<iframe>元素的name屬性的值，將兩者關聯起來

　　<formaction="#"enctype="multipart/form-data"method="post"target="upload-frame">

　　<inputname="file"type="file">

　　<buttontype="submit">Upload</button>

　　</form>

　　<iframeid="upload-frame"name="upload-frame"src="about:blank"style="display:none;"></iframe>

　　這樣在提交表單上傳的時候，頁面就不會重新加載了，取而代之的是iframe重新加載了，不過iframe原本就是隱藏的，即使重新加載也不會感知到

　　訪問文件

　　FileAPI提供了訪問文件的能力，通過輸入框的files屬性訪問，這會得到一個FileList，這是一個集合，如果只選擇了一個文件，那么集合中的第一個元素就是這個文件

　　varinput=document.querySelector('input[type="file"]')

　　varfile=input.files[0]

　　console.log(file.name)//文件名稱

　　console.log(file.size)//文件大小

　　console.log(file.type)//文件類型

　　支持FileAPI的瀏覽器可以參考caniuse

　　Ajax上傳

　　由于可以通過FileAPI直接訪問文件內容，再結合XMLHttpRequest對象直接將文件上傳，將其作為參數傳給XMLHttpRequest對象的send方法即可

　　varxhr=newXMLHttpRequest()

　　xhr.open('POST','/upload/url',true)

　　xhr.send(file)

　　不過一些原因不建議直接這樣傳遞文件，而是使用FormData對象來包裝需要上傳的文件，FormData是一個構造函數，使用的時候先new一個實例，然后通過實例的append方法向其中添加數據，直接把需要上傳的文件添加進去

　　varformData=newFormData()

　　formData.append('file',file,file.name)//第3個參數是文件名稱

　　formData.append('username','Mary')//還可以添加額外的參數

　　甚至也可以直接把表單元素作為實例化參數，這樣整個表單中的數據就全部包含進去了

　　varformData=newFormData(document.querySelector('form'))

　　數據準備好后，就是上傳了，同樣是作為參數傳給XMLHttpRequest對象的send方法

　　varxhr=newXMLHttpRequest()

　　xhr.open('POST','/upload/url',true)

　　xhr.send(formData)

　　監測上傳進度

　　XMLHttpRequest對象還提供了一個progress事件，基于這個事件可以知道上傳進度如何

　　varxhr=newXMLHttpRequest()

　　xhr.open('POST','/upload/url',true)

　　xhr.upload.onprogress=progressHandler//這個函數接下來定義

　　上傳的progress事件由xhr.upload對象觸發，在事件處理程序中使用這個事件對象的loaded（已上傳字節數）和total（總數）屬性來計算上傳的進度

　　functionprogressHandler(e){

　　varpercent=Math.round((e.loaded/e.total)*100)

　　}

　　上面的計算會得到一個表示完成百分比的數字，不過這兩個值也不一定總會有，保險一點先判斷一下事件對象的lengthComputable屬性

　　functionprogressHandler(e){

　　if(e.lengthComputable){

　　varpercent=Math.round((e.loaded/e.total)*100)

　　}

　　}

　　支持Ajax上傳的瀏覽器可以參考caniusehttps://caniuse.com/#feat=xhr2

　　分割上傳

　　使用文件對象的slice方法可以分割文件，給該方法傳遞兩個參數，一個起始位置和一個結束位置，這會返回一個新的Blob對象，包含原文件從起始位置到結束位置的那一部分（文件File對象其實也是Blob對象，這可以通過fileinstanceofBlob確定，Blob是File的父類）

　　varblob=file.slice(0,1024)//文件從字節位置0到字節位置1024那1KB

　　將文件分割成幾個Blob對象分別上傳就能實現將大文件分割上傳

　　functionupload(file){

　　letformData=newFormData()

　　formData.append('file',file)

　　letxhr=newXMLHttpRequest()

　　xhr.open('POST','/upload/url',true)

　　xhr.send(formData)

　　}

　　varblob=file.slice(0,1024)

　　upload(blob)//上傳第一部分

　　varblob2=file.slice(1024,2048)

　　upload(blob2)//上傳第二部分

　　//上傳剩余部分

　　通常用一個循環來處理更方便

　　varpos=0//起始位置

　　varsize=1024//塊的大小

　　while(pos<file.size){

　　letblob=file.slice(pos,pos+size)//結束位置=起始位置+塊大小

　　upload(blob)

　　pos+=size//下次從結束位置開始繼續分割

　　}

　　服務器接收到分塊文件進行重新組裝的代碼就不在這里展示了

　　使用這種方式上傳文件會一次性發送多個HTTP請求，那么如何處理這種多個請求同時發送的情況呢？方法有很多，可以用Promise來處理，讓每次上傳都返回一個promise對象，然后用Promise.all方法來合并處理，Promise.all方法接受一個數組作為參數，因此將每次上傳返回的promise對象放在一個數組中

　　varpromises=[]

　　while(pos<file.size){

　　letblob=file.slice(pos,pos+size)

　　promises.push(upload(blob))//upload應該返回一個promise

　　pos+=size

　　}

　　同時改造一下upload函數使其返回一個promise

　　functionupload(file){

　　returnnewPromise((resolve,reject)=>{

　　letformData=newFormData()

　　formData.append('file',file)

　　letxhr=newXMLHttpRequest()

　　xhr.open('POST','/upload/url',true)

　　xhr.onload=()=>resolve(xhr.responseText)

　　xhr.onerror=()=>reject(xhr.statusText)

　　xhr.send(formData)

　　})

　　}

　　當一切完成后

　　Promise.all(promises).then((response)=>{

　　console.log('Uploadsuccess!')

　　}).catch((err)=>{

　　console.log(err)

　　})

　　支持文件分割的瀏覽器可以參考caniuse

　　判斷一下文件對象是否有該方法就能知道瀏覽器是否支持該方法，對于早期的部分版本瀏覽器需要加上對應的瀏覽器廠商前綴

　　varslice=file.slice||file.webkitSlice||file.mozSlice

　　if(slice){

　　letblob=slice.call(file,0,1024)//call

　　upload(blob)

　　}else{

　　upload(file)//不支持分割就只能直接上傳整個文件了，或者提示文件過大

　　}

　　拖拽上傳

　　通過拖拽API可以實現拖拽文件上傳，默認情況下，拖拽一個文件到瀏覽器中，瀏覽器會嘗試打開這個文件，要使用拖拽功能需要阻止這個默認行為

　　document.addEventListener('dragover',function(e){

　　e.preventDefault()

　　e.stopPropagation()

　　})

　　任意指定一個元素來作為釋放拖拽的區域，給一個元素綁定drop事件

　　varelement=document.querySelector('label')

　　element.addEventListener('drop',function(e){

　　e.preventDefault()

　　e.stopPropagation()

　　//...

　　})

　　通過該事件對象的dataTransfer屬性獲取文件，然后上傳即可

　　varfile=e.dataTransfer.files[0]

　　upload(file)//upload函數前面已經定義

　　選擇類型

　　給文件輸入框添加accept屬性即可指定選擇文件的類型，比如要選擇png格式的圖片，則指定其值為image/png，如果要允許選擇所有類型的圖片，就是image/*

　　<inputaccept="image/*"type="file">

　　添加capture屬性可以調用設備機能，比如capture="camera"可以調用相機拍照，不過這并不是一個標準屬性，不同設備實現方式也不一樣，需要注意

　　<inputaccept="image/*"capture="camera"type="file">

　　經測iOS設備添加該屬性后只能拍照而不能從相冊選擇文件了，所以判斷一下

　　if(iOS){//iOS用navigator.userAgent判斷

　　input.removeAttribute('capture')

　　}

　　不支持的瀏覽器會自動忽略這些屬性

　　自定義樣式

　　文件輸入框在各個瀏覽器中呈現的樣子都不大相同，而且給input定義樣式也不是那么方便，如果有需要應用自定義樣式，有一個技巧，可以用一個label關聯到這個文件輸入框，當點擊這個label元素的時候就會觸發文件輸入框的點擊，打開瀏覽文件的對話框，相當于點擊了文件輸入框一樣的效果

　　<labelfor="file-input"></label>

　　<inputid="file-input"style="clip:rect(0,0,0,0);position:absolute;"type="file">

　　這時就可以將原本的文件輸入框隱藏了，然后給label元素任意地應用樣式，畢竟要給label元素應用樣式比input方便得多

以上就是關于“用于web開發的文件上傳怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。