jQuery+ajax实现文件上传功能
更新时间：2020年12月22日 08:48:18 作者：李大璟
这篇文章主要为大家详细介绍了jQuery+ajax实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery+ajax实现文件上传功能(显示文件上传进度)，供大家参考，具体内容如下
具体实现步骤
1、定义UI结构,引入bootstrap的CSS文件和jQuery文件
2、给上传按钮绑定点击事件
3、验证是否选择了文件
4、向FormData中追加文件
5、使用ajax发起上传文件的请求
6、设置文件的路径
7、使用xhr获得文件上传的进度
8、当文件上传完成让进度条显示绿色
<style>
#loading {
width: 20px;
height: 20px;
}
#img {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #abcdef;
opacity: .5;
}
</style>
<body>
<!--multiple可以选择多个文件 -->
<input type="file" multiple name="" id="ipt" multiple><button id="btn" type="submit">上传文件</button>
<img id="loading" src="../img/loading.gif" alt="" style="display: none;">
<!-- bootstrap中引入条件 -->
<div class="progress" style="margin-top: 10px;width: 100px;margin-left: 10px;">
<div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<!-- 显示上传到服务器的图片 -->
<img src="" alt="" id="img" style="display: none;">
<script src="../lib/jquery-1.11.0.min.js"></script>
<script>
$(function() {
$('#btn').on('click', function() {
// 获取文件列表
var file = $('#ipt')[0].files
// 判断是否选择了文件
if (file.length <= 0) {
return alert('请上传文件')
}
// 创建formdata
var fd = new FormData()
// 向formdata中传入数据
// fd.append()
// file是一个伪数组
fd.append('avatar', file[0])
// 用ajax传送数据
$.ajax({
type: 'post',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
// 数据不需要编码
contentType: false,
// 数据对象不需要转换成键值对格式
processData: false,
data: fd,
beforeSend: function() {
$('#loading').show()
},
complete: function() {
$('#loading').hide()
},
success: function(res) {
// 判断是否接收成功
if (res.status !== 200) {
return alert(reg.msg)
}
$('#img').attr('src', 'http://www.liulongbin.top:3006' + res['url']).css('display', 'block')
},
xhr: function xhr() {
var xhr = new XMLHttpRequest()
// 获取文件上传的进度
xhr.upload.onprogress = function(e) {
// e.lengthComputable表示当前的进度是否是可以计算,返回布尔值
if (e.lengthComputable) {
// e.loaded表示下载了多少数据, e.total表示数据总量
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
// 让进度条的宽度变化
$('#progress').css('width', percentComplete)
// 在进度条中显示百分比
$('#progress').html(percentComplete + 'px')
}
}
// 文件加载完成
xhr.upload.onload = function() {
$('#progress').removeClass('progress-bar progress-bar-striped').addClass('progress-bar progress-bar-success')
}
return xhr
}
})
})
})
</script>
</body>
效果演示(slow3g状态)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jQuery实现的超酷苹果风格图标滑出菜单效果代码,涉及jQuery基于鼠标hover事件动态操作页面元素属性的相关技巧,非常美观实用,需要的朋友可以参考下2015-09-09
最近项目里对表格的操作比较多。以往我们要做一些效果的时候往往通过程序代码来实现，这个努力不值，因为JQuery是完全可以做到的，并且是客户端运行，不经过服务器处理，给用户的反应快，也减少了服务器压力2012-02-02
本文给大家记录的是个人在使用$.extend 的时候遇到的一个小问题，以及原因分析和解决方案，十分的实用，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要介绍了jQuery+ajax的资源回收处理机制,结合实例形式简单分析了ajax中complete对象完成回调之后的资源回收处理机制用法,需要的朋友可以参考下2017-01-01
众所周知，Jquery是对JavaScript的一种高效的封装，所以Jquery要操作的数组即是JavaScript中的数组，在JavaScript中我们使用for以及for-in进行数组的操作，而在Jquery中则使用$.map()、$.each()来操作数组2011-01-01
使用基于jquery的gamequery插件做JS乒乓球游戏
现在jquery比较流行，用js做游戏的也越来越多了，虽然现在html5出来了，但实际上要用html5做点啥出来还是得靠javascript，所以学好js是非常重要的2011-07-07
JQuery DataTable删除行后的页面更新利用Ajax解决
使用Jquery的DataTable进行数据表处理非常方便，常遇到的一个问题就是删除一行后页面必须进行更新，下面与大家分享下使用Ajax的解决方法2013-05-05
要实现一个简单的列表，右上角有一个检索功能我们要实现的是列表检索功能，具体实例代码大家参考下本文2017-07-07
这篇文章主要介绍了jQuery实现的超简单轮播图功能,结合完整实例形式分析了基于jQuery实现的轮播图相关功能实现、样式设置与注意事项,需要的朋友可以参考下2023-05-05
本文使用jquery.form.js解决提交之后，页面发生跳转，在一个空白页面上显示了后端返回的json数据问题，需要的朋友参考下2017-06-06
最新评论