2. 程式人生 > 程式設計 >Ajax 檔案上傳進度監聽之upload.onprogress案例詳解

Ajax 檔案上傳進度監聽之upload.onprogress案例詳解

阿新 • • 發佈：2021-09-10

$.ajax實現

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./libs//jquery."></script>
    <style>
      div {
        width: 0%;
        height: 20px;
        background-color: #f00;
        /* transition: all 0.2s; */
      }
    </style>
  </head>
  <body>
    <div></div>
    <input type="file" />
    <script>
      $(function() {
        // 使用者選擇好檔案之後單擊彈出層的“開啟”按鈕的觸發事件是：change
        $('input').on('change',function() {
          // 1.收集檔案資料
          let myfile = $('input')[0].files[0]
 

          let formdata = new FormData()
          formdata.append('file_data',myfile)

          // 2.發起ajax請求
          $.ajax({
            url: 'http://127.0.0.1:3001/uploadFile',type: 'post',data: formdata,processData: false,contentType: false,xhr: function() {
              let newxhr = new XMLHttpRequest()
              // 新增檔案上傳的監聽
              // onprogress:進度監聽事件，只要上傳檔案的進度發生了變化，就會自動的觸發這個事件
              newxhr.upload.onprogress = function(e) {
                console.log(e)
                let percent = (e.loaded / e.total) * 100 + '%'
                $('div').('width',percent)
              }
              return newxhr
            },success: function(res) {
              console.log(res)
            },dataType: 'json'
          })
        })
      })
    <
 
/script>
  </body>
</html>

原生實現：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./libs/jquery/jquery.js"></script>
    <style>
      div {
        width: 0%;
        height: 20px;
        background-color: #f00;
        /* transition: all 0.2s; */
      }
    </style>
  </head>
  <body>
    <div>&客棧
 
lt;/div>
    <input type="file" />
    <script>
      $(function() {
        // 使用者選擇好檔案之後單擊彈出層的“開啟”按鈕的觸發事件是：change
        $('input').on('change',function() {
          // 1.收集檔案資料
          let myfile = $('input')[0].files[0]
          let formdata = nwww.cppcns.comew FormData()
          formdata.append('file_data',myfile)

          let xhr = new XMLHttpRequest()

          xhr.open('post','http://127.0.0.1:3001/uploadFile')

          // 細節1：檔案上傳，如果使用fromdata,則不要設定請求頭
          xhr.upload.onprogress = function(e) {
            console.log(e)
            let percent = (e.loaded / e.total) * 100 + '%'
            $('div').css('width',percent)
          }
          // 細節2：send中可以直接傳遞formdata
          xhr.send(formdata)
        })
      })
    </script>
  </body>
</html>

到此這篇關於Ajax 檔案上傳進度監聽之upload.onprogress案例詳解的文章就介紹到這了,更多相關Ajax 檔案上傳進度監聽之upload.onprogress內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

Ajax 檔案上傳進度監聽之upload.onprogress案例詳解

$.ajax實現 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" />

Nodejs檔案上傳、監聽上傳進度的程式碼

前言 檔案上傳如果加上進度條會有更好的使用者體驗（尤其是中大型檔案），本文使用 Nodejs 配合前端完成這個功能。

jQuery ajax formData檔案上傳進度條（親測，好文章！！）

技術標籤：jQueryjsvuejQueryajaxformData檔案上傳進度條 XMLHttpRequest.upload向後臺上傳檔案時監聽進度，主要使用的是XMLHttpRequest提供的upload方法，此方法會返回一個XMLHttpRequestUpload物件，用來表示

jQuery ajax 檔案上傳 Request Headers 缺少 boundary

原文地址： https://blog.jijian.link/2020-07-28/jquery-ajax-upload-file/ 一般上傳方式 const file = document.getElementById(\'js_resume_file\').files[0];

Ajax檔案上傳，Servlet解析並下載--程式碼

--使用依賴包 commons-fileupload-1.4.jar commons-io-2.6.jar hutool-all-5.2.3.jar --html 檔案上傳測試

Node.js：上傳檔案，服務端如何獲取檔案上傳進度

內容概述 multer是常用的Express檔案上傳中介軟體。服務端如何獲取檔案上傳的進度，是使用的過程中，很常見的一個問題。在SF上也有同學問了類似問題《nodejs multer有沒有檢視檔案上傳進度的方法？》。稍微回答了

ajax檔案上傳(前後端)

image_utils 1.呼叫checknull函式 function checkEmpty(value,text){ if(null==value || value.length==0){

PHP大檔案上傳進度條分段

​ 4GB以上超大檔案上傳和斷點續傳伺服器的實現 隨著視訊網站和大資料應用的普及，特別是高清視訊和4K視訊應用的到來，超大檔案上傳已經成為了日常的基礎應用需求。

Ajax檔案上傳及其他引數中文亂碼解決

1.ajax實現檔案上傳 前端 <div> <form id=\'upload-form\' onsubmit=\'return false\' class=\'m-2\'>

php+大視訊檔案上傳+進度條

​ 眾所皆知，web上傳大檔案，一直是一個痛。上傳檔案大小限制，頁面響應時間超時.這些都是web開發所必須直面的。

PHP 大檔案上傳進度條實現

​ 總結一下大檔案分片上傳和斷點續傳的問題。因為檔案過大（比如1G以上），必須要考慮上傳過程網路中斷的情況。http的網路請求中本身就已經具備了分片上傳功能，當傳輸的檔案比較大時，http協議自動會將檔案切片（

使用Upload+Progress實現檔案上傳進度條實時更新功能

使用Upload+Progress實現檔案上傳進度條實時更新功能，需要藉助http-request屬性。具體使用方法如下：

SpringBoot檔案上傳+進度條（thymeleaf）

1. 環境搭建 新建springboot專案，新增web 和 thymeleaf 依賴 <dependency> <groupId>org.springframework.boot</groupId>

CTF-i春秋-Web-檔案包含漏洞、檔案上傳漏洞-Do you know upload？-第三屆“百越杯”福建省高校網路空間安全大賽

2020.09.21 經驗教訓 檔案包含漏洞，想到php://input和php://filter/read=convert.base64-encode/resource=index.php

Python指令碼實現監聽伺服器的思路程式碼詳解

開前準備 Schedule使用方法。 基本的Linux操作 Python3環境 Step1 首先我得先假設你會了如何每十五分鐘去執行一次檢查這件事情。(後期我會補上如何去做定時任務，相信我！)

JS如何監聽div的resize事件詳解

需求 開發過程中經常遇到的一個問題就是如何監聽一個div的size變化。 比如我用canvas繪製了一個chart，當canvas的size發生變化的時候，需要重新繪製裡面的內容，這個時候就需要監聽resize事件做處理。

JavaScript 檔案載入與阻塞問題之效能優化案例詳解

上來先給一個問題：在書寫html頁面時，當你要從外部引入檔案時，script標籤會放置在哪個位置呢，放置位置不同對頁面載入有影響嗎？

設計模式之組合模式案例詳解

基本介紹 組合模式，又叫部分整體模式，它建立了物件組的樹形結構，將物件組合成樹狀結構以表示“整體-部分”的層次關係。

設計模式之外觀模式案例詳解

基本概念 外觀模式（Facade），也叫“過程模式”。外觀模式為子系統中的一組介面提供一個一致的介面，此模式定義了一個高層介面，這個介面使得這一子系統更加容易使用。

設計模式之代理模式案例詳解

基本概念 代理模式是指為一個物件提供一個替身，以控制對這個物件的訪問。即通過代理物件訪問目標物件，這樣做的好處是，可以在目標物件實現在基礎上，增強額外的功能操作，即擴充套件目標物件的功能。