jQuery实现文件上传

时间:2021-6-4 作者:qvyue

1,定义UI结构

 
 

2,验证是否选择了文件

$('#btnUpload').on('click', function() {
     // 1. 将 jQuery 对象转化为 DOM 对象,并获取选中的文件列表
     var files = $('#file1')[0].files
     // 2. 判断是否选择了文件
     if (files.length 

3,向FormData中追加文件

// 向 FormData 中追加文件
var fd = new FormData()
fd.append('avatar', files[0])

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

$.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)
     }
})

5,jQuery实现loading效果

5.1 ajaxStart(callback)

Ajax 请求开始时,执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果,示例代码如下:

// 自 jQuery 版本 1.8 起,该方法只能被附加到文档
$(document).ajaxStart(function() {
    $('#loading').show()
})

注意: $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求.

5.2 ajaxStop(callback)

Ajax 请求结束时,执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果,示例代码如下:

// 自 jQuery 版本 1.8 起,该方法只能被附加到文档
$(document).ajaxStop(function() {
    $('#loading').hide()
})

6,axios(⭐⭐⭐)

6.1 什么是axios

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象,axios 简单易用。

相比于 jQuery,axios 更加轻量化,只专注于网络数据请求。

6.2 axios发起GET请求

axios 发起 get 请求的语法:

axios.get('url', { params: { /*参数*/ } }).then(callback)

具体的请求示例如下:

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
})

6.3 axios发起POST请求

axios 发起 post 请求的语法:

axios.post('url', { /*参数*/ }).then(callback)

具体的请求示例如下:

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
})

6.4 直接使用axios发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数,语法如下:

axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)

发起get请求

document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
})

发起post请求

document.querySelector('#btn4').addEventListener('click', function () {
  axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: {
      name: '娃哈哈',
      age: 18,
      gender: '女'
    }
  }).then(function (res) {
    console.log(res.data)
  })
})
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。