最终效果展示
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>到此这篇关于Ajax实现上传图像功能的示例详解的文章就介绍到这了,更多相关Ajax上传图像内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Ajax实现上传图像功能的示例详解
发表评论 取消回复