Ajax 文件上传进度监听之upload.onprogress案例详解
更新时间:2021年09月09日 10:46:21 作者:Henry_ww
这篇文章主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
首先来说,让一个游戏赋有可玩性必须要动静结合,我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片,感兴趣的朋友可以了解下,便当巩固js知识了2013-01-01defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误2010-04-04javascript中的toFixed固定小数位数 简单实例分享
这篇文章介绍了toFixed固定小数位数的简单例子,有需要的朋友可以参考一下2013-07-07基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
下面小编就为大家带来一篇基于bootstrap-datetimepicker.js不支持IE8的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11
最新评论