普通网友 2021-02-09 15:47 采纳率: 33.3%
浏览 250

最近写一个动态进度条，出了个问题，使用xhr.upload.onprogress的问题

在文件上传时，想用xhr.upload.onprogresss写一个进度条，但使用时总是报错，报错信息如下：

如果把xhr.upload.onprogress改成xhr.onprogress，就不会报错，但是进度条直接到100%。如何解决，求指教！

  • 写回答

2条回答 默认 最新

  • 普通网友 2021-02-09 18:04
    关注

    已解决。添加了跨域处理模块：’cors‘。暴力解决。但还是不懂报错的原理。求告知

    评论

报告相同问题？

  • 上传/下载进度条实现
    2021-09-20 10:36
    Forina_Han的博客 对于上传，可在xhr.upload.onprogress上做监听。 监听事件要在xhr.open(method,url)前进行绑定。 为了保证正确执行，必须在调用 open()之前添加 onprogress 事件处理程序。–《JavaScript高级程序指南v4》 究其...
  • 前后端交互 - 文件上传 ( 进度条 ) 及 XML
    2020-04-07 19:44
    Mrqin-shen的博客 上传文件的同时，为了更好的提示用户当前进度，需要进度条及数据传速度。 返回的文件不一定是html格式，如果是XML格式的情况下，该如何在前端获取。
  • 【JavaScript源代码】Ajax 文件上传进度监听之upload.onprogress案例详解.docx
    2021-12-27 22:50
    - **upload.onprogress**：一个事件处理器，当文件正在上传时，该事件会被触发，并可以通过`event.loaded`和`event.total`获取已上传的字节数和总字节数。 #### 三、案例分析 ##### 3.1 jQuery实现 ```html <!...
  • XMLHttpRequest上传文件实现进度条(-onprogress- )
    2018-06-08 10:38
    I-T枭的博客 XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。 它分成上传和下载两种情况 １）下载的progress事件属于XMLHttpRequest对象 ２）上传的progress事件属于XMLHttpRequest.upload对象。 ...
  • ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条
    2021-08-06 23:02
    weixin_32760125的博客 // ajax + jQuery上传function UploadFile() {var xhrOnProgress = function(fun) {... //绑定监听//使用闭包实现监听绑return function() {//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象var xhr = $.a...
  • layui文件上传带进度条显示.zip
    2019-12-17 10:44
    通过监听`xhr.upload.onprogress`事件，我们可以获取到上传进度并更新进度条的状态。这样，用户就能直观地看到文件上传的实时进度，提高了操作的可感知性。 在`layui`中，创建一个文件上传组件的基本步骤如下： 1....
  • XHR 文件上传进度条原理解析
    2019-01-27 13:44
    weixin_33962621的博客 前几天再写自己的一个后台模板。有个功能是实现上传进度条。 那么ojk了，上网上找下上传进度条的实现。 (这个截图是我已经写的好的) 此刻我突然想到了为啥我不看看ng-zorro 得代码怎么写的，他肯定写的有上传进度条...
  • jquery.ajax + antd.Upload.customRequest文件上传进度
    2024-08-02 10:51
    梦想身高1米8的博客 前情提要：大文件分片上传，需要利用Upload的customRequest属性自定义...也就是无法通过给Upload的action属性赋值上传地址进行上传，所以Upload组件自带的上传进度条，也没法直接用了，需要在customRequest中加工一下。
  • 前端实现请求进度条
    2019-11-08 20:16
    flying_huixia的博客 1、前端实现请求进度条 一般使用readyStatechange事件探测HTTP请求的完成。 当正在加载服务器的响应时，XMLHttpRequest对象会发生progress事件，通常每隔50毫秒左右。所以用这些事件可以给用户反馈请求的进度。 ...
  • ajax提交进度条,ajax上传进度条onprogress
    2021-08-05 14:48
    Lu Amy的博客 ajax上传进度条onprogress2020-10-15 分类: 前端资源主要还是用到XMLhttprequest的onprogress监听函数实现var formData = new FormData();formData.append("file", e);formData.append("musicName", songName);...
  • jQuery实现的点击上传出现进度条动画特效源码.zip
    2022-11-18 21:54
    本资源“jQuery实现的点击上传出现进度条动画特效源码.zip”显然是一个利用jQuery来创建文件上传时进度条动画效果的代码示例。下面，我们将深入探讨这个主题，以及如何实现这样的功能。 首先，让我们理解上传进度条...
  • html5Upload.rar
    2021-01-25 11:58
    xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percentComplete = Math.round((e.loaded / e.total) * 100); progressElement.value = percentComplete; } }; ``` 总结起来，...
  • 简单的jQuery上传进度条代码.zip
    2019-07-11 14:46
    为了解决这个问题，我们可以利用JavaScript库jQuery来实现一个简单的上传进度条效果。本教程将详细讲解如何通过jQuery实现这一功能。 首先，我们需要理解jQuery库的核心概念。jQuery是一个轻量级的JavaScript库，它...
  • ajax上传文件，不执行progress，添加不上事件
    2020-12-14 16:10
    北里新妆的博客 1，ajax添加progress进度条必须是异步！！！！ 代码： //上传 function importBuildingInfo(url,type){ var formData = new FormData($("#msgForm")[0]); formData.append("type",type); $('.loadsmall').show...
  • JS文件上传加进度条
    2020-03-27 18:36
    qq_19749779的博客 JS文件上传加进度条htmlJS html <form id="video_form" enctype="multipart/form-data" > <input class="files" type="file" name="upfile" id="upfile" onchange="uploadvideo('upfile',this)" accept=....
  • 原生js上传图片利用XHR的ProgressEvent对象diy进度条
    2018-04-07 12:04
    luck_lin的博客 而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、loaded和total。其中，lengthComputable是一个表示进度信息是否可用的布尔值，loaded表示已经...
  • Layui如何使用上传进度？无需任何修改，几行代码即可实现上传进度条！
    2020-06-08 16:53
    六弦的闷音的博客 Layui如何使用上传进度？ 无需任何修改，几行代码即可实现上传进度条！ 直接上代码 layui.use(['element', 'upload'], function () { var upload = layui.upload, element = layui.element,$=layui.$; ...
  • jQuery File Upload 基于Jquery的图片上传组件.zip
    2022-11-05 00:05
    同时，它会创建一个进度条元素，根据xhr对象的upload.onprogress事件更新进度。 ### 四、使用步骤 1. **引入依赖**：在HTML文件中引入jQuery库和jQuery File Upload的JavaScript及CSS文件。 2. **HTML结构**：设置...
  • 基于Vue使用Arco Design组件封装一个七牛云上传图片的函数
    2022-09-17 22:01
    兔兔土土土的博客 博主通过学习七牛云官方文档，封装了一个七牛云上传图片的工具函数，方便项目中上传图片的使用。如果有小伙伴想要学习可根据七牛云官方地址https://developer.qiniu.com/kodo/1283/javascript，上传组件使用的是Arco...
  • 没有解决我的问题, 去提问