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+ajax简单实现文件上传的方法
本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr
-
基于jquery ajax的多文件上传进度条过程解析
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> <meta name="viewport" content="width=device-width,initia
-
jQuery Ajax文件上传(php)
如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代
-
jquery实现异步文件上传ajaxfileupload.js
本文实例为大家分享了jquery实现异步文件上传的具体代码,供大家参考,具体内容如下 ajaxfileupload.js 异步上传文件: 直接引用. 调用方法: $.ajaxFileUpload({ url:'',//后台接口地址 type: "post", secureuri: false, //一般设置为false fileElementId: 'ofx', // 上传文件的id.name属性名 dataType: 'json', success: function(data, s
-
jQuery插件AjaxFileUpload实现ajax文件上传
本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码 代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/
-
基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam
-
jquery ajax实现文件上传功能实例代码
下面看下ajax实现文件上传 没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></
-
jquery插件ajaxupload实现文件上传操作
本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp
-
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 { di
-
利用SpringMVC和Ajax实现文件上传功能
个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml
-
Ajax实现文件上传功能(Spring MVC)
本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下 前端表单 和 JQuery jsp/html代码 使用JQury <script src="static/js/jquery-3.4.1.js"></script> 前端表单 <form id="form-avatar" enctype="multipart/form-data"> <p>请选择要上传的文件:</p&
-
原生JS和jQuery版实现文件上传功能
本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></
-
jquery+springboot实现文件上传功能
本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码,供大家参考,具体内容如下 前端 <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-w
-
使用jQuery.form.js/springmvc框架实现文件上传功能
使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul
-
MVC中基于Ajax和HTML5实现文件上传功能
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读
-
jquery 实现拖动文件上传加载进度条功能
通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" > <div class="progress-label">0%</div> <div class="son"></div> </div> //要拖动到的地方 <div class="main
-
Ajax 配合node js multer 实现文件上传功能
说明 作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上 效果 是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感
-
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na