HTML+AJAX實(shí)現(xiàn)上傳大文件實(shí)例解析

JAX上傳的用戶體驗(yàn)更好，HTML上傳用戶使用更方便一點(diǎn)，直接在網(wǎng)頁(yè)里面就能夠操作了。示例在下面提供了，是完整的源代碼，有教程，有視頻教程，基本上使用非常簡(jiǎn)單，開(kāi)發(fā)也非常簡(jiǎn)單，有技術(shù)支持，

網(wǎng)上搜了一下，基本上講這塊的文章還是很多，但是就是一個(gè)字亂，講的很混亂。也沒(méi)有提供完整的前后端示例。

用戶上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務(wù)器也容易出錯(cuò)，需要分片，分塊，分割上傳。也就是將一個(gè)大的文件分成若干個(gè)小文件塊來(lái)上傳，另外就是需要實(shí)現(xiàn)秒傳功能和防重復(fù)功能，秒傳就是用戶如果上傳過(guò)這個(gè)文件，那么直接在數(shù)據(jù)庫(kù)中查找記錄就行了，不用再上傳一次，節(jié)省時(shí)間，實(shí)現(xiàn)的思路是對(duì)文件做MD5計(jì)算，將MD5值保存到數(shù)據(jù)庫(kù)，算法可以用MD5，或者CRC，或者SHA1，這個(gè)隨便哪個(gè)算法都行。

分片還需要支持?jǐn)帱c(diǎn)續(xù)傳，現(xiàn)在HTML5雖然提供了信息記錄功能，但是只支持到了會(huì)話級(jí)，也就是用戶不能關(guān)閉瀏覽器，也不能清空緩存。但是有的政府單位上傳大文件，傳了一半下班了，明天繼續(xù)傳，電腦一關(guān)結(jié)果進(jìn)度信息就丟失了，這個(gè)是他們的一個(gè)痛點(diǎn)。

切片的話還有一點(diǎn)就是在服務(wù)器上合并，一個(gè)文件的所有分片數(shù)據(jù)上傳完后需要在服務(wù)器端進(jìn)行合并操作。

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復(fù)制到項(xiàng)目中

示例中已經(jīng)包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對(duì)應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進(jìn)度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動(dòng)測(cè)試

啟動(dòng)成功

效果

數(shù)據(jù)庫(kù)

、ajax介紹

ajax 是前后端交互的重要手段或橋梁。它不是一個(gè)技術(shù)，是一組技術(shù)的組合。

ajax ：a：異步；j：js；a：和；x：服務(wù)端的數(shù)據(jù)。

ajax的組成：

異步的 js 事件
其他 js (處理解析數(shù)據(jù))
XMLHttpRequest 對(duì)象
數(shù)據(jù)(txt、json、xml、html)

通過(guò)后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。也就是在不需要重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。傳統(tǒng)的網(wǎng)頁(yè)不使用ajax，如果需要更新內(nèi)容，必須重新加載整個(gè)頁(yè)面。

ajax請(qǐng)求原理：創(chuàng)建一個(gè)網(wǎng)絡(luò)請(qǐng)求對(duì)象 -> 發(fā)送連接請(qǐng)求 -> 發(fā)送請(qǐng)求數(shù)據(jù) -> 檢查網(wǎng)絡(luò)請(qǐng)求對(duì)象的狀態(tài) -> 如果響應(yīng)成功了 -> 瀏覽器接收返回?cái)?shù)據(jù)并更新網(wǎng)頁(yè)。接下來(lái)詳細(xì)介紹對(duì)象的創(chuàng)建以及它的方法。

二、創(chuàng)建 XMLHttpRequest 對(duì)象

XMLHttpRequest 對(duì)象，用于后臺(tái)與服務(wù)器之間的數(shù)據(jù)交換，意味著可以在不加載整個(gè)網(wǎng)頁(yè)的情況下，更新部分內(nèi)容或數(shù)據(jù)。現(xiàn)代瀏覽器基本都支持，但是低版本的IE不支持，如果我們考慮IE兼容問(wèn)題創(chuàng)建對(duì)象的時(shí)候需要兼容創(chuàng)建。

考慮兼容時(shí)創(chuàng)建的對(duì)象：

var xhr ;
if( window.XMLHttpRequest ){ //檢查瀏覽器是否支持XMLHttpRequest
 xhr = new XMLHttpRequest()
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6  IE5
}

三、XMLHttpRequest的方法

3.1、open( )

設(shè)置請(qǐng)求的類型、請(qǐng)求接口、是否異步處理。

使用語(yǔ)法：open( method , url , async )

method：設(shè)置網(wǎng)絡(luò)請(qǐng)求的類型，常用的 get 和 post
url：設(shè)置請(qǐng)求的接口也就是服務(wù)器的地址
async：true時(shí)表示異步，false表示同步

3.2、send( )

將請(qǐng)求發(fā)送到服務(wù)器。

使用語(yǔ)法：send( string )

string，只用在請(qǐng)求方式是post時(shí)，發(fā)送給服務(wù)器的數(shù)據(jù)。數(shù)據(jù)是鍵值對(duì)格式的，如："name=jack&pwd=1234"

使用發(fā)送方式不同的時(shí)候，傳輸數(shù)據(jù)添加方式也不同，所以我們介紹下分別為post和get時(shí)，數(shù)據(jù)是如何發(fā)送的？

3.3、提交方式

使用 get 方式提交

get發(fā)送請(qǐng)求時(shí)，需要傳給后臺(tái)的數(shù)據(jù)通過(guò)url來(lái)傳遞，多個(gè)參數(shù)之間使用 & 符號(hào)連接，使用時(shí)如下：

xhr.opn( "GET" , "1.php?name=hello&age=world" , true )
xhr.send()

使用 post 方式提交

使用 post 方式發(fā)送請(qǐng)求時(shí)，使用send來(lái)發(fā)送數(shù)據(jù)，有時(shí)需要設(shè)置數(shù)據(jù)格式，類似表單那樣，此時(shí)可通過(guò) setRequestHeader 設(shè)置發(fā)送的數(shù)據(jù)格式

xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded")

Content-type常見(jiàn)類型：

text/plain 純文本，基本不怎么用
application/x-www-form-urlcoded 鍵值對(duì)格式傳值，多個(gè)參數(shù)使用&連接
multipart/form-data 定界符，分隔各個(gè)數(shù)據(jù)，經(jīng)常用于上傳文件

四、readyState 屬性

readyState 存有 XMLHttpRequest 的狀態(tài)，它的值從 0-4 發(fā)生變化，分別代表的意義：

0：請(qǐng)求初始化，對(duì)象剛剛創(chuàng)建
1：服務(wù)器已連接
2：已發(fā)送，send發(fā)放已調(diào)用
3：已接收，此時(shí)只接收了響應(yīng)(response)頭部分
4：已接收，此時(shí)接收響應(yīng)(response)體信息

每當(dāng) readyState 狀態(tài)值發(fā)生改變時(shí)會(huì)，就會(huì)觸發(fā) onreadystatechange 事件，對(duì)應(yīng)著每個(gè)狀態(tài)值就會(huì)被觸發(fā)五次。當(dāng)狀態(tài)值為 4 時(shí)表示網(wǎng)絡(luò)請(qǐng)求響應(yīng)完畢，就可以獲取返回的值。

xhr.onreadystateChange = function(){
 if( xhr.readyState==4 ){
  if( xhr.status>=200 && xhr.status<300 || xhr.status==304 ){
   console.log("請(qǐng)求成功",xhr.responseXML)
  }else{
   console.log("請(qǐng)求失敗")
  }
 }
}

五、響應(yīng)信息

通常我們需要獲取服務(wù)器返回的信息，然后對(duì)我們的網(wǎng)頁(yè)做相對(duì)應(yīng)的結(jié)果展示，通常使用 XMLHttpRequest 的 responseText 或 responseXML 屬性。

responseText ---> 獲取到的是字符串形式。接收到可直接使用，無(wú)需轉(zhuǎn)換。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML ---> 獲取到 XML 形式的數(shù)據(jù)。使用時(shí)需要解析，如：

<person>
 <name>小米粒</name>
 <age>18</age> 
</person> 
解析時(shí)：
document.getElementsByTagName("name")[0]

responseXML 目前已被 json 取代，所以作為了解就好。

六、ajax實(shí)例

var xhr ;
if( window.XMLHttpRequest ){
 xhr = new XMLHttpRequest()
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6  IE5
}
xhr.open('GET','1.txt',true)
xhr.send()
xhr.onreadystatechange = function(){
 if(xhr.readyState==4){
  if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
   console.log("請(qǐng)求成功",xhr.response) // 請(qǐng)求成功 abc
  }else{
   console.log("請(qǐng)求失敗")
  }
 }
}

1.txt 文檔內(nèi)容為 abc。所以返回的結(jié)果也是abc

Web開(kāi)發(fā)中，通過(guò)POST請(qǐng)求將數(shù)據(jù)發(fā)送給服務(wù)器是一種常見(jiàn)的方式。使用jQuery可以輕松地發(fā)送POST請(qǐng)求，這需要使用jQuery的ajax()方法。本文將介紹jQuery如何使用POST請(qǐng)求發(fā)送數(shù)據(jù)，并提供一個(gè)實(shí)際的例子。

使用$.ajax()方法發(fā)送POST請(qǐng)求

使用jQuery的ajax()方法發(fā)送POST請(qǐng)求需要設(shè)置以下屬性：

url：要發(fā)送請(qǐng)求的URL
type：請(qǐng)求類型，這里應(yīng)設(shè)置為POST
dataType：預(yù)期響應(yīng)數(shù)據(jù)類型，可以是JSON、XML或HTML等
data：要發(fā)送的數(shù)據(jù)，可以是一個(gè)JavaScript對(duì)象或字符串

以下是一個(gè)示例代碼：

$.ajax({
  url: 'https://example.com/api',
  type: 'POST',
  dataType: 'json',
  data: {
    name: 'Alice',
    age: 25,
    city: 'New York'
  },
  success: function(response) {
    console.log(response);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log('錯(cuò)誤：' + errorThrown);
  }
});

在上面的示例中，我們向URL為https://example.com/api的API發(fā)送一個(gè)POST請(qǐng)求，并攜帶一個(gè)JavaScript對(duì)象作為數(shù)據(jù)發(fā)送。

當(dāng)API響應(yīng)成功時(shí)，success()回調(diào)函數(shù)將被執(zhí)行，并將響應(yīng)數(shù)據(jù)作為參數(shù)傳遞。當(dāng)API響應(yīng)失敗時(shí)，error()回調(diào)函數(shù)被執(zhí)行，并將HTTP錯(cuò)誤信息作為參數(shù)傳遞。

使用$.post()方法簡(jiǎn)化POST請(qǐng)求

除了使用ajax()方法外，還可以使用jQuery的$.post()方法來(lái)發(fā)送POST請(qǐng)求，如下所示：

$.post('https://example.com/api', {
  name: 'Alice',
  age: 25,
  city: 'New York'
}, function(response) {
  console.log(response);
}, 'json');

使用$.post()方法時(shí)，第一個(gè)參數(shù)是請(qǐng)求URL，第二個(gè)參數(shù)是要發(fā)送的數(shù)據(jù)，第三個(gè)參數(shù)是成功響應(yīng)后的回調(diào)函數(shù)，最后一個(gè)參數(shù)是響應(yīng)數(shù)據(jù)類型。

帶header信息的POST請(qǐng)求

在發(fā)送POST請(qǐng)求時(shí)，有時(shí)需要在請(qǐng)求頭中添加一些信息，例如身份驗(yàn)證令牌或版本信息。可以使用以下代碼在請(qǐng)求中添加標(biāo)頭信息：

$.ajax({
  url: 'https://example.com/api',
  type: 'POST',
  dataType: 'json',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Alice', age: 25 }),
  headers: {
    'Authorization': 'Token xxx',
    'X-API-Version': '1'
  },
  success: function(response) {
    console.log(response);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log('錯(cuò)誤：' + errorThrown);
  }
});

在上面的示例中，我們將headers屬性添加到請(qǐng)求中，并在其中添加了Authorization和X-API-Version標(biāo)頭。

在contentType中傳遞的“application/json”指示我們發(fā)送的數(shù)據(jù)是JSON格式。data屬性使用JSON.stringify()方法將數(shù)據(jù)轉(zhuǎn)換為JSON字符串。

總結(jié)

本文介紹了如何使用jQuery發(fā)送POST請(qǐng)求，并提供了簡(jiǎn)單和帶標(biāo)頭信息的請(qǐng)求的實(shí)際示例。使用jQuery可以方便地向服務(wù)器發(fā)送數(shù)據(jù)，并等待響應(yīng)。在實(shí)際開(kāi)發(fā)中，我們通常會(huì)使用POST請(qǐng)求來(lái)提交表單數(shù)據(jù)、發(fā)送文件或與服務(wù)器進(jìn)行交互。

在線咨詢

上一篇：HTML 表格
下一篇：3個(gè)超贊的 vue.js 自定義滾動(dòng)條組件VueScrollbar

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商