Ajax实现上传图像功能的示例详解

最终效果展示

xhr发起请求

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
 
<body>
 <!--1、文件选择框 -->
 <input type="file" id="file1">
 <!-- 2、上传文件的按钮 -->
 <button id="btnupload">上传文件</button>
 <br/>
 <div class="progress" style="width:300px;margin:5px;">
 <div class="progress-bar progress-bar-striped active" style="width: 0%;" id="precent">
 0%
 </div>
 </div>
 <!-- 3、img标签 来显示上传成功以后的图片 -->
 <img alt="" id="img" width="800">
 
 <script>
 var precent = document.querySelector('#precent')
 var btnupload = document.querySelector('#btnupload')
 btnupload.addEventListener('click', function() {
 var files = document.querySelector('#file1').files
 if (files.length <= 0) {
 return alert('请选择要上传的文件')
 }
 
 var fd = new FormData()
 fd.append('avatar', files[0])
 var xhr = new XMLHttpRequest()
 
 xhr.upload.onprogress = function(e) {
 console.log(e);
 if (e.lengthComputable) {
 var h = Math.ceil((e.loaded / e.total) * 100)
 precent.style.width = h + '%'
 precent.innerHTML = h + '%'
 console.log(h);
 }
 }
 xhr.upload.onload = function() {
 $('#precent').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)
 console.log(data);
 if (data.status == 200) {
 console.log('上传成功');
 document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
 } else {
 console.log('上传失败');
 }
 }
 }
 })
 </script>
</body>
 
</html>

ajax发起请求

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="jquery.js"></script>
 <style>
 img {
 width: 50px;
 height: 50px;
 display: none;
 }
 </style>
</head>
 
<body>
 <input type="file" id="file1">
 <button id="btnupload">上传文件</button>
 </br>
 <img src="5-121204193R5-50.gif" alt="" id="loading">
 <script>
 $(function() {
 $(document).ajaxStart(function() {
 $('#loading').show()
 })
 $(document).ajaxStop(function() {
 $('#loading').hide()
 })
 $('#btnupload').on('click', function() {
 var files = $('#file1')[0].files
 if (files.length <= 0) {
 alert('请选择文件')
 }
 console.log('ok');
 var fd = new FormData()
 fd.append('avatar', files[0])
 $.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>
作者:一夕ξ原文地址:https://blog.csdn.net/qq_45387575/article/details/124081612

%s 个评论

要回复文章请先登录注册