您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       深圳小产权房      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
Ajax实现上传图像功能的示例详解
内容摘要: xhr发起请求!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocume......
xhr发起请求

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Document</title>

<linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="externalnofollow">

<scriptsrc="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<!--1、文件选择框-->

<inputtype="file"id="file1">

<!--2、上传文件的按钮-->

<buttonid="btnupload">上传文件</button>

<br/>

<divclass="progress"style="width:300px;margin:5px;">

<divclass="progress-barprogress-bar-stripedactive"style="width:0%;"id="precent">

0%

</div>

</div>

<!--3、img标签来显示上传成功以后的图片-->

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

<script>

varprecent=document.querySelector('#precent')

varbtnupload=document.querySelector('#btnupload')

btnupload.addEventListener('click',function(){

varfiles=document.querySelector('#file1').files

if(files.length<=0){

returnalert('请选择要上传的文件')

}

varfd=newFormData()

fd.append('avatar',files[0])

varxhr=newXMLHttpRequest()

xhr.upload.onprogress=function(e){

console.log(e);

if(e.lengthComputable){

varh=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-barprogress-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){

vardata=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发起请求

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Document</title>

<scriptsrc="jquery.js"></script>

<style>

img{

width:50px;

height:50px;

display:none;

}

</style>

</head>

<body>

<inputtype="file"id="file1">

<buttonid="btnupload">上传文件</button>

</br>

<imgsrc="5-121204193R5-50.gif"alt=""id="loading">

<script>

$(function(){

$(document).ajaxStart(function(){

$('#loading').show()

})

$(document).ajaxStop(function(){

$('#loading').hide()

})

$('#btnupload').on('click',function(){

varfiles=$('#file1')[0].files

if(files.length<=0){

alert('请选择文件')

}

console.log('ok');

varfd=newFormData()

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>

上一篇:JavaScript实现横向滑出的多级菜 下一篇:vue3限制table表格选项个数的解决
发布日期:2022/4/12
手机扫二维码直达本页
发布时间:11:06:06
点击:361
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022