• 通过xhr实现文件上传功能，使用jQuery实现文件上传功能

    目录

    一、使用xhr实现文件上传功能

    实现步骤：定义UI结构 → 验证用户是否选择了文件 → 向FornData中追加文件 → 使用xhr发起上传文件的请求 → 监听onreadyStatechange事件

    1、定义UI结构

    
<input type="file" id="file1">

<button id="btnUpload">上传文件button><br />

<img src="" id="img" width="800">

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、验证用户是否选择了文件

    // 1.获取上传文件的按钮
var btnUpload = document.querySelector('#btnUpload');
// 2. 为按钮绑定单击事件处理函数
btnUpload.addEventListener('click',function(){
    // 3.获取到选择的文件列表
    var files = document.querySelector("#file1").files;
    if(files.length<=0){
        return alert ('请选择要上传的文件');
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    3、向FormData中追加文件

    // 1.创建formdata对象
var fd = new FormData();
// 2.向formdata中追加文件
fd.append("avatar",files[0])

    • 1
    • 2
    • 3
    • 4

    4、使用xhr发起上传文件的请求

    // 1.创建xhr
var xhr = new XMLHttpRequest();
// 2.创建请求
xhr.open("POST",'http://www.liulongbin.top:3006/api/upload/avator');
// 3.发起请求
xhr.send(fd);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    5、监听onreadyStatechange事件

    xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText)
    if (data.status === 200) {
      // 上传成功
      document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
    } else {
      // 上传失败
      console.log('图片上传失败！' + data.message)
    }
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    二、xhr案例（实现文件带进度条上传）

    1、基于Bootstrap绘制进度条效果

    Bootstrap进度条地址：https://v3.bootcss.com/components/#progress

     
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


<div class="progress" style="width: 500px; margin: 15px 10px;">
  <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
    0%
  div>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2、动态设置进度条

    基于jQuery操作DOM，调用attr属性设置style样式

    引入jQuery
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 
// 监听文件上传的进度
xhr.upload.onprogress = function (e) {
  if (e.lengthComputable) {
    // 计算出上传的进度
    var procentComplete = Math.ceil((e.loaded / e.total) * 100)
    console.log(procentComplete)
    // 动态设置进度条
    $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3、监听上传完成的事件

     xhr.upload.onload = function () {
 		// removeClass()：移除上传中的类样式；addClass()添加上传完成的类样式
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

    • 1
    • 2
    • 3
    • 4

    完整代码

    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>Documenttitle>
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
head>

<body>
  
  <input type="file" id="file1" />
  
  <button id="btnUpload">上传文件button>

  
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
    div>
  div>

  <br />
  
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()

      // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }

      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82

    运行结果

    在这里插入图片描述

    二、使用jQuery实现文件上传功能

    实现步骤：定义UI结构 → 验证用户是否选择了文件 → 向FornData中追加文件 → 使用jQuery发起上传文件的请求

    1、定义UI结构

    <!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- 文件选择框 -->
<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>

<br />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd590c78cda71722a604c44b80e79c7392eed11edd280-S5faVN_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668831485&t=ad1842680bf433c15ba9b8ced946a2bd" alt="" style="display: none;" id="loading" />

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2、验证用户是否选择了文件

    $('#btnUpload').on('click', function () {
    var files = $('#file1')[0].files
    if (files.length <= 0) {
      return alert('请选择文件后再上传！')
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3、向FornData中追加文件

    var fd = new FormData();
fd.append('avatar', files[0]);

    • 1
    • 2

    4、使用jQuery发起上传文件的请求

    使用jQuery上传文件，固定写法：contentType: false, processData: false,

    contentType: false：不修改Content-Type属性，使用FormData默认的Content-Type值
    processData: false：不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器

    $.ajax({
	method: 'POST',
	url: 'http://www.liulongbin.top:3006/api/upload/avatar',
	data: fd,
	// 不修改Content-Type属性，使用FormData默认的Content-Type值
	contentType: false,
	// 不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器
	processData: false,
	success: function (res) {
	  console.log(res)
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    四、jQuery案例(实现文件带loading效果上传)

    1、通过ajaxStart(callback)展示loading效果

    ajaxStart(callback)：Ajax请求开始时，执行ajaxStart()函数，可以在ajaxStart的回调函数中显示loading效果
    注意点
    ① 从jQuery1.8版本起，ajaxStart()只能被附加在document身上，不能添加到body身上
    ② $(document).ajaxStart()函数会监听当前文档内所有的Ajax请求

    // 监听到Ajax请求被发起了
$(document).ajaxStart(function () {
  $('#loading').show()
})

    • 1
    • 2
    • 3
    • 4

    2、通过ajaxStop(callback)隐藏loading效果

    ajaxStop(callback)：Ajax请求结束时，执行ajaxStop()函数，可以在ajaxStop的回调函数中隐藏loading效果

    // 监听到 Ajax 完成的事件
$(document).ajaxStop(function () {
  $('#loading').hide()
})

    • 1
    • 2
    • 3
    • 4

    完整代码

    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>Documenttitle>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
head>

<body>

  <input type="file" id="file1" />
  <button id="btnUpload">上传文件button>

  <br />
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd590c78cda71722a604c44b80e79c7392eed11edd280-S5faVN_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668831485&t=ad1842680bf433c15ba9b8ced946a2bd" alt="" style="display: none;" id="loading" />

  <script>
    $(function () {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
        $('#loading').show()
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

      $('#btnUpload').on('click', function () {
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  script>

body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    运行结果

    在这里插入图片描述

  • 相关阅读:
    [设计模式] 浅谈SOLID设计原则
    海思Hi3519DV500边缘计算盒子-英码IVP09A，双核A55 64位处理器
    heic文件怎么转换成jpg？实用图片格式转换方法分享
    JavaScript流程控制语句
    260. 只出现一次的数字 III
    初试小程序轮播组件
    今日思考（2） — 训练机器学习模型用GPU还是NUP更有优势（基于文心一言的回答）
    C++基础入门详解（一）
    Selenium常用控件实战
    Mysql分组查询获取每组最新一条数据
  • 原文地址：https://blog.csdn.net/Vest_er/article/details/127424388