用Ajax怎样实现上传图像，代码如何写
导读：这篇文章分享给大家的内容是关于用Ajax怎样实现上传图像，代码如何写，本文介绍得很详细，内容很有参考价值，希望可以帮到有需要的小伙伴，接下来就让小编带领大家一起了解看看吧。 最终效果展示 xhr发起请求 <!DOCTYPE html...
这篇文章分享给大家的内容是关于用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>
通过以上内容的阐述，相信大家对“用Ajax怎样实现上传图像，代码如何写”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用Ajax怎样实现上传图像，代码如何写
本文地址： https://pptw.com/jishu/653914.html