xhr.upload.onprogress监听上传进度产生跨域

最新推荐文章于 2023-01-04 22:54:35 发布
最新推荐文章于 2023-01-04 22:54:35 发布
阅读量885 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanxiang1122/article/details/111177862
版权

xhr.upload.onprogress监听上传进度产生跨域

问题起因：

ie和edge浏览器在调用xhr.upload.onprogress进度事件时，仍然只会发送post或者get请求，
但是火狐等高端一点的浏览器会将其视为跨域问题，并在post或者get请求之前，自动发出一个option请求
那么坑爹的就是，后台不解决option，后续新的请求就不会得到响应。

解决方案

后台处理option请求就行
在这里插入图片描述

小九的小酒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP基于session.upload_progress 实现文件上传进度显示功能详解
01-02
本文实例讲述了PHP基于session.upload_progress 实现文件上传进度显示功能。分享给大家供大家参考，具体如下： ...当一个上传在处理中，同时POST一个与INI中设置的session.upload_progress.name同名变量时，上传进度可
【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败
weixin_30954265的博客
07-07 1201
背景： 1、前端Web中有两个域名，a.com和b.com，其中a.com是访问主站（页面），b.com是数据提交接口的服务器（XHR请求） 2、a.com中用XHR调用b.com/cerate【没有指定协议】，保存数据，写法如下： $.ajax({ url: "//b.com/create", type: 'POST', data: requestPara...
XMLHttpRequest上传文件实现进度条(-onprogress- )
热门推荐
hahahhahahahha123456的博客
06-08 1万+
话不多说，直接上代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件进度实现</title> <script type="text/javascript"&
使用原生xhr实现上传文件功能
咖啡壶的博客
11-02 3092
上传文件 新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。 实现步骤： ① 定义 UI 结构 ② 验证是否选择了文件 ③ 向 FormData 中追加文件 ④ 使用 xhr 发起上传文件的请求 ⑤ 监听 onreadystatechange 事件 定义UI结构 <!-- 1. 文件选择框 --> <input type="file" id="file1" /> <!-- 2. 上传按钮 --> <button id="btnU
JavaScript实现监控上传和下载进度
qq_38847914的博客
07-05 2618
js实时监控上传下载进度
antdesign+vue+ts自定义上传文件customRequest，显示进度条onProgress，axios请求中断axios.CancelToken。
flowerSmiler的博客
01-04 4856
antdesign+vue+ts自定义上传文件customRequest，显示进度条onProgress，axios请求中断axios.CancelToken。 axios请求配置onUploadProgress，通过loaded和total计算出进度，自定义上传的onProgress同步进度到ant组件. toFixed(2)) } % ` , class : 'test' } // 上传进度条 const
上传/下载进度条实现
qq_45428582的博客
09-20 1357
上传下载进度事实上是使用到了xmlhttprequset对象中的progress事件。 对于下载，可在xhr.onprogress上做监听。 对于上传，可在xhr.upload.onprogress上做监听。 监听事件要在xhr.open(method,url)前进行绑定。 为了保证正确执行，必须在调用 open()之前添加 onprogress 事件处理程序。–《JavaScript高级程序指南v4》 究其原因，可能是由于，xhr.open实现的功能是定义本次请求，xhr.send仅仅是将定义好的请求
xhr.js:最小的 XmlHttpRequest Javascript 微库
06-26
xhr.js 这是有史以来最小的 XmlHttpRequest Javascript 微型库。 曾经！ 未压缩：781 字节缩小：442 字节缩小 + GZ 压缩：329 字节支持所有浏览器： 火狐 1.0+ Chrome 1+ 浏览器 7+ 歌剧Safari 1.2+ 不支持 IE5 和 ...
Ajax-xhr.js.zip
09-17
Ajax-xhr.js.zip,js是使用xmlhttprequest发出ajax/http请求的库（）。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新...
xhr.m
最新发布
10-15
xhr.m
xhr.zip_evidence5a8_thing1y8_xhr01_com_xhr11111.com_线性回归
09-15
本算法采用相似搜索,和线性加权回归算法,主要用于预测,而且效果好,
ajax文件上传监听进度xhr.upload.onprogress
curryFMVP的博客
02-04 540
ajax文件上传监听进度xhr.upload.onprogress jQuery中的ajax上传方式 $.ajax({ xhrFields: { withCredentials: true }, crossDomain: true == !(document.all), type: 'POST', // 请求方式 url: globleObj.domain + '/wjw/workPlan/uploadPdf', // 接口地址 data: addFd, //
ajax上传文件监听进度xhr.upload.onprogress方法
Sapling
03-05 6924
jQuery中的ajax上传方式 $.ajax({ xhrFields: { withCredentials: true }, crossDomain: true == !(document.all), type: 'POST', // 请求方式 url: globleObj.domain + '/wjw/workPlan/uploadPdf', // 接...
文件上传相关，同源、跨域(防抖、节流)
HiYulinlin的博客
01-17 540
文件上传相关，同源、跨域(防抖、节流)
XHR 文件上传进度条原理解析
weixin_33962621的博客
01-27 1854
前言 前几天再写自己的一个后台模板。有个功能是实现上传进度条。 那么ojk了，上网上找下上传进度条的实现。 (这个截图是我已经写的好的) 此刻我突然想到了为啥我不看看ng-zorro 得代码怎么写的，他肯定写的有上传进度条得功能…… 在 github.com/NG-ZORRO/ng… 第248行处发现了这个…… return this.http.request(req).subscrib...
Ajax和XHR
weixin_51670675的博客
10-16 1560
Ajax是基于浏览器提供的XMLHttpRequest对象的封装 它可以令开发者只向服务器获取数据，而不是HTML文档。
onprogress无法触发解决
a8725585的博客
07-17 9742
在上传文件时要做进度显示 需要用到xhr.upload.onprogress事件，此时如果用到mock.js模拟数据的话 则无法触发onprogress事件 原因： mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效...
xhr.onload, xhr.onerror 以及xhr.onreadystatechange的区别
06-08
`xhr.onload` 和 `xhr.onerror` 是 `XMLHttpRequest` 对象的两个事件处理程序，分别在 Ajax 请求成功和失败时触发。 - `xhr.onload`：当 Ajax 请求成功时触发，即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4，而且 `status` 属性值在 200 到 299 之间。 - `xhr.onerror`：当 Ajax 请求失败时触发，即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4，但 `status` 属性值不在 200 到 299 之间。 `xhr.onreadystatechange` 是 `XMLHttpRequest` 对象的另一个事件处理程序，它在 Ajax 请求状态改变时触发，即 `XMLHttpRequest` 对象的 `readyState` 属性值发生变化时（从 0 到 4 ），每次状态变化都会触发一次该事件。 通常，我们在 `xhr.onreadystatechange` 事件处理程序中判断 `readyState` 和 `status` 属性值来确定 Ajax 请求是否成功。但是，由于 `xhr.onreadystatechange` 事件会触发多次，因此我们需要在事件处理程序中使用条件语句来判断 Ajax 请求的状态，而 `xhr.onload` 和 `xhr.onerror` 事件只会触发一次，因此使用它们更加方便。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值