Ajax 文件上传进度监听之upload.onprogress案例详解
$.ajax实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./libs/jquery/jquery.js"></script>
<style>
div {
width: 0%;
height: 20px;
background-color: #f00;
/* transition: all 0.2s; */
}
</style>
</head>
<body>
<div></div>
<input type="file" />
<script>
$(function() {
// 用户选择好文件之后单击弹出层的“打开”按钮的触发事件是：change
$('input').on('change', function() {
// 1.收集文件数据
let myfile = $('input')[0].files[0]
let formdata = new FormData()
formdata.append('file_data', myfile)
// 2.发起ajax请求
$.ajax({
url: 'http://127.0.0.1:3001/uploadFile',
type: 'post',
data: formdata,
processData: false,
contentType: false,
xhr: function() {
let newxhr = new XMLHttpRequest()
// 添加文件上传的监听
// onprogress:进度监听事件，只要上传文件的进度发生了变化，就会自动的触发这个事件
newxhr.upload.onprogress = function(e) {
console.log(e)
let percent = (e.loaded / e.total) * 100 + '%'
$('div').css('width', percent)
}
return newxhr
},
success: function(res) {
console.log(res)
},
dataType: 'json'
})
})
})
</script>
</body>
</html>
原生实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./libs/jquery/jquery.js"></script>
<style>
div {
width: 0%;
height: 20px;
background-color: #f00;
/* transition: all 0.2s; */
}
</style>
</head>
<body>
<div></div>
<input type="file" />
<script>
$(function() {
// 用户选择好文件之后单击弹出层的“打开”按钮的触发事件是：change
$('input').on('change', function() {
// 1.收集文件数据
let myfile = $('input')[0].files[0]
let formdata = new FormData()
formdata.append('file_data', myfile)
let xhr = new XMLHttpRequest()
xhr.open('post', 'http://127.0.0.1:3001/uploadFile')
// 细节1：文件上传，如果使用fromdata,则不要设置请求头
xhr.upload.onprogress = function(e) {
console.log(e)
let percent = (e.loaded / e.total) * 100 + '%'
$('div').css('width', percent)
}
// 细节2：send中可以直接传递formdata
xhr.send(formdata)
})
})
</script>
</body>
</html>
到此这篇关于Ajax 文件上传进度监听之upload.onprogress案例详解的文章就介绍到这了,更多相关Ajax 文件上传进度监听之upload.onprogress内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
AjaxUpLoad.js实现文件上传
AjaxUpload.js文件的代码,供大家参考,具体内容如下 /** * AJAX Upload ( http://valums.com/ajax-upload/ ) * Copyright (c) Andris Valums * Licensed under the MIT license ( http://valums.com/mit-license/ ) * Thanks to Gary Haran, David Mark, Corey Burns and others for cont
-
ajaxfileupload.js实现上传文件功能
使用ajaxfileupload.js实现上传文件功能 一.ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址 2.fileElementId 文件选择框的id属性,即的id 3.secureuri 是否启用安全提交,默认为false 4.dataType 服务器返回的数据类型.可以为xml,script,json,html.如果不填写,jQuery会自动判断 5.su
-
AjaxFileUpload.js实现异步上传文件功能
做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去- 等真正实现的时候才发现,根本行不通. 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件. AjaxFileUpload 这个插件的原理是创建隐藏的表单和iframe,然后用JS去提交,获得返回值. 语法 $.ajaxFileUpload([options]) 参数说明 url 上传处理程序地址. fileElementId 需要上传的文件域的ID,即的ID. secureur
-
springMVC使用ajaxFailUpload上传图片的方法
1.在jsp页面<head>标签内引入script文件(注意顺序) <script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="resources/js/ajaxFileUpload.js"></scri
-
JFinal使用ajaxfileupload实现图片上传及预览
本文实例为大家分享了JFinal使用ajaxfileupload实现图片上传预览的具体代码,供大家参考,具体内容如下 1.前端jsp页面核心代码 <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script> <script type="text/javascript" src=&
-
Ajax 文件上传进度监听之upload.onprogress案例详解
$.ajax实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compati
-
Nodejs文件上传、监听上传进度的代码
前言 文件上传如果加上进度条会有更好的用户体验(尤其是中大型文件),本文使用 Nodejs 配合前端完成这个功能. 前端我们使用 FormData 来作为载体发送数据. 效果 前端部分 HTML 部分 和 Js 部分 <input type="file" id="file" /> <!-- 进度条 --> <progress id="progress" value="0" max="10
-
Spring boot + LayIM + t-io 实现文件上传、 监听用户状态的实例代码
前言 今天的主要内容是:LayIM消息中图片,文件的上传对接.用户状态的监听.群在线人数的监听.下面我将挨个介绍. 图片上传 关于Spring boot中的文件上传的博客很多,我也是摘抄了部分代码.上传部分简单介绍,主要介绍在开发过程中遇到的问题.首先我们看一下LayIM的相应的接口: layim.config({ //上传图片接口 ,uploadImage: {url: '/upload/file'} //上传文件接口 ,uploadFile: {url: '/upload/file'} //
-
Android TextWatcher三个回调以及监听EditText的输入案例详解
TextWatcher是一个监听字符变化的类.当我们调用EditText的addTextChangedListener(TextWatcher)方法之后,就可以监听EditText的输入了. 在new出一个TextWatcher之后,我们需要实现三个抽象方法: beforeTextChanged onTextChanged afterTextChanged 看下beforeTextChanged的注释: This method is called to notify you that, with
-
HTML5 Ajax文件上传进度条如何显示
原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭.因为项目不考虑低版本浏览器,所以决定用html5实现.下面只是一个简单的demo,具体样式需要自己去做. 后台基于strut2进行文件处理,具体因项目而定.只是要注意设置文件大小的限制. <constant name="struts.multipart.maxSize" value="52428800"/>这个配置
-
Android下载进度监听和通知的处理详解
本文实例为大家分享了Android下载进度监听和通知的具体代码,供大家参考,具体内容如下 下载管理器 关于下载进度的监听,这个比较简单,以apk文件下载为例,需要处理3个回调函数,分别是: 1.下载中 2.下载成功 3.下载失败 因此对应的回调接口就有了: public interface DownloadCallback { /** * 下载成功 * @param file 目标文件 */ void onComplete(File file); /** * 下载失败 * @param e */
-
基于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
-
Springboot整合zookeeper实现对节点的创建、监听与判断的案例详解
目录 Springboot整合zookeeper教程 1.环境准备 2.代码编写 2.1.在pom.xml文件中增加zookeeper依赖(记得跟自己的zookeeper版本对应) 2.2.API测试 3.全部代码 Springboot整合zookeeper教程 1.环境准备 zookeeper集群环境 一个简单的springboot项目环境 不懂如何搭建zookeeper集群的小伙伴可以移步到我的另一篇文章喔,里面有详细的zookeeper集群搭建教程~ zookeeper集群搭建步骤(超详细
-
js HTML5 Ajax实现文件上传进度条功能
本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1. lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +
-
基于jquery ajax的多文件上传进度条过程解析
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> <meta name="viewport" content="width=device-width,initia