jQuery相当于XMLHttpRequest的上传?

2023-11-24

使用 HTML5 的文件 API,通过名为的对象进行上传upload in the XMLHttpRequest. This是我正在使用的教程(以及谷歌缓存镜像因为目前它已关闭)。这是相关部分:

// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();

// Update progress bar
xhr.upload.addEventListener("progress", function (evt) {

如您所见,为了跟踪上传进度,XMLHttpRequest对象有一个名为upload,我们可以添加一个事件处理程序。

我的问题是:jQuery 有等效的吗?。我试图让代码尽可能干净和跨浏览器兼容,只要微软认为这是一个好主意(尽管听起来像会在2012年或2013年).


这是我为解决这个问题而想出的办法。 $.ajax() 调用允许提供回调来生成 XHR。我只是在调用请求之前生成一个,设置它,然后创建一个闭包以在 $.ajax() 需要它时返回它。如果他们只是通过 jqxhr 授予访问权限,那就容易得多,但他们没有。

var reader = new FileReader();

reader.onloadend = function (e) {
    var xhr, provider;

    xhr = jQuery.ajaxSettings.xhr();
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function (e) {
            // ...
        }, false);
    }   
    provider = function () {
        return xhr;
    };  

    // Leave only the actual base64 component of the 'URL'
    // Sending as binary ends up mangling the data somehow
    // base64_decode() on the PHP side will return the valid file.
    var data = e.target.result;
    data = data.substr(data.indexOf('base64') + 7); 

    $.ajax({
        type: 'POST',
        url: 'http://example.com/upload.php',
        xhr: provider,
        dataType: 'json',
        success: function (data) {
            // ...
        },  
        error: function () {
            // ...
        },  
        data: {
            name: file.name,
            size: file.size,
            type: file.type,
            data: data,
        }   
    }); 
};  
reader.readAsDataURL(file);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery相当于XMLHttpRequest的上传? 的相关文章

  • Chrome SuppressDifferentOriginSubframeJSDialogs 使用 JS 设置覆盖?

    Chrome 开发团队显然刚刚推出了一项名为 SuppressDifferentOriginSubframeJSDialogs 的新 功能 这使得默认情况下不会显示来自与父级不同域上的 iFrame 的警报 确认框 https www ch
  • 是否可以覆盖 javaScript 原始数据类型?

    问题是不言自明的 我知道可以扩展原始数据类型 例如string但有可能覆盖它吗 这是在采访中被问到的一个问题 不 你不能覆盖任何东西 Ecma脚本定义原始类型 http es5 github com x4 3 2 Undefined Nul
  • Bing.com 如何创建放大的缩略图?

    当我使用 Bing com 搜索图像时 我发现它们的图像经过精心裁剪和排序 当您将鼠标放在图像上时 会弹出另一个窗口 其中显示放大的图像 我想在我的程序中做同样的事情 我检查了他们页面的源代码 他们正在使用 javascript 但我仍然不
  • 提交前验证表单(比检查空字段更复杂)

    我有一个包含时间输入的表单 具体来说 开放时间和结束时间 当按下提交按钮时 它会转到一个 php 页面 其中这些输入将添加到数据库中 在允许提交表单之前我想检查一些事情 例如 我想确保开始时间早于 小于 结束时间 这是表格 Opens
  • 使用 jquery 和 php 测试表单输入是否为 1 或 2 位整数

    我有一个表单 其中有五个字段全部设置为 maxlength 2 基本上 我希望唯一可以输入的值是一位或两位整数 因为在将值存储在数据库中之前对这些字段执行计算 是否有任何 jquery 不允许用户输入不是整数的值 另外 用 jquery 和
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 引入 V8 后,Google Apps 脚本无法为其他用户完全执行

    我编写了一个脚本 得到了这里好心人的大力帮助 该脚本使用 Google Sheets 脚本复制 Google Drive 上的文件夹 和内容 它运行了很长一段时间 但后来我启用了 V8 引擎 现在已禁用 问题是 它仍然适用于我 也许还有其他
  • 光滑的轮播缓动示例

    我正在使用 Slick Carousel http kenwheeler github io slick http kenwheeler github io slick 但不知道如何合并不同的幻灯片切换 有人有例子可以分享吗 这是我目前拥有
  • ReactJS:从没有 onChange 事件的 props 中选择默认值?

    所以 我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序 我有一个道具传递我想要选择的选项的默认值 如果我有的话 它就没有问题
  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生
  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • 使用 jQuery 修改 HTML 表格的结构

    我有一个元素列表 X在以下示例中 显示在 HTML 表格的行或列中 从 HTML 代码的角度来看 我有 水平显示 table tr td A td td B td td C td tr table 或 垂直显示 table tr td A
  • 在 Google Apps 脚本中的文本前插入换行符

    我需要在 Google 文档中的某些文本之前插入一些换行符 尝试过这种方法但出现错误 var body DocumentApp getActiveDocument getBody var pattern WORD 1 var found b
  • 如何在 JavaScript 中获取浮点数的小数位?

    我想要的是与 Number prototype toPrecision 几乎相反的 这意味着当我有数字时 它有多少位小数 例如 12 3456 getDecimals 4 对于任何想知道如何更快地完成此操作 无需转换为字符串 的人 这里有一
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • 未捕获(承诺中)TypeError:无法读取 null popover.js 的属性“模板”

    当我触发时我注意到一个错误 popover dispose 当我上下滚动页面时 函数会发生错误 并且它会减慢我的页面速度 该函数按其应有的方式运行并关闭弹出窗口 但这就是错误Uncaught in promise TypeError Can
  • 使用 Lodash 将对象键转换为具有键值数量的数组[重复]

    这个问题在这里已经有答案了 我有一个产品对象 products bread 1 milk 2 cheese 2 chicken 1 我想要一个包含产品名称的数组 如下所示 products bread milk milk cheese ch

随机推荐

  • 均匀分布的随机数

    嘿 有没有办法选择均匀分布的随机数 我用过这个功能 Math floor Math random 2 它返回 1 或 0 但是 我认为它没有确切 50 的机会产生任何一个 更好的想法 谢谢 如果您不相信 请检查 这段代码给了我 0 4997
  • SQL 性能调优 - 如何?

    性能如何调整 SQL 查询 可以使用哪些技巧 工具 概念来改变 SQL 查询的性能 如何量化收益 一个人需要注意什么 可以使用哪些技巧 工具 概念来改变 SQL 查询的性能 使用索引 他们在实践中如何运作 标准化数据与非标准化数据 性能与设
  • 如何在 Python 中克隆类?

    我有一个 A 类 我想要一个具有完全相同功能的 B 类 我不能或不想从 B 继承 例如执行 class B A pass 我仍然希望 B 与 A 相同 但有不同的 i id A id B 请注意 我不是在谈论实例 而是在谈论要克隆的类 我很
  • 制作 Linux Web 服务的最佳方式? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我有一台运行 Ubuntu Linux Server Edition 的服务器 我曾经有一台 Windows Server 在 Windows 上使用 ASP net 创建 Web 服务很
  • Android 9.0 NotificationManager.notify() 抛出 java.lang.SecurityException

    我自己无法重现这个问题 但到目前为止已经有 5 个用户报告了这个问题 我最近确实发布了一个应用程序更新 将目标 SDK 从 27 更改为 28 我确信这在其中发挥了作用 所有 5 位用户都在某种 Pixel 设备上运行 Android 9
  • 为什么绑定的 StringFormat 不使用当前区域性?

    我目前的文化是 ru RU 我需要它将小数格式化为货币字符串 decimal n 111 22M n ToString C will return 111 22 但是当我尝试使用绑定的 StringFormat 字段时 我得到 111 22
  • 如何查看docker容器使用的核心数?

    我已经使用 Docker 一段时间了 我已经安装了 docker 并使用启动了一个容器 docker run it cpuset cpus 0 ubuntu 当我登录到 docker 控制台并运行时 grep processor proc
  • 使用 C 样式字符串有哪些缺点?

    我知道缓冲区溢出是使用 C 样式字符串 字符数组 的一种潜在危险 如果我知道我的数据适合我的缓冲区 是否可以使用它们 我需要注意 C 风格字符串固有的其他缺点吗 EDIT 这是一个接近我正在做的事情的例子 char buffer 1024
  • 我应该将 jQuery 代码放置在 Ruby on Rails 应用程序中的什么位置?

    我对 RoR 不太熟悉 对 jQuery 也相当陌生 目前 我有一个工作 RoR 网站作为学习平台 我想包含一些 jQuery 基本功能来扩展我的学习 mouseenter hover fadeIn 等 让我用一些代码来设置场景 为了保持简
  • 在 Python 中生成偶数列表

    基本上我需要帮助从我用 Python 创建的列表中生成偶数 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987 1597 2584 4181 6765 10946 17711 28657 46368 我
  • MySQL 在 XAMPP 上意外关闭 - 在 IP: '::' 上创建的服务器套接字

    我对 XAMPP 还很陌生 在我今天早上开始工作之前它一直运行得很好 这是错误日志文件信息 当我尝试启动 MySQL 时 它会打开然后停止 如果需要 我宁愿不重新安装 但如果需要的话可以 InnoDB using atomic writes
  • PATCH 和 PUT 请求不适用于表单数据

    我正在使用 Laravel 创建一个 RESTFUL 应用程序 并使用 Postman 测试该应用程序 目前 有一个问题是PATCH or PUT如果从 Postman 发送带有表单数据的数据 Parameter testimonial w
  • 在 Javascript 中通过 setInterval() 捕获鼠标位置

    我在 Javascript 中有一个函数 可以根据鼠标位置移动一个 div 该功能设置在setInterval 函数并每秒执行一次 我需要像这样捕获鼠标位置 function mousemov document getElementById
  • 如何在jquery中动态创建的元素上触发点击事件

    if term children length 0 term append ul class ulDynamic ul var i for i 1 i lt 3 i var liDynamic Term i var liId Term i
  • 模型属性可以显示在模板中吗

    我希望在模板中显示模型属性 该属性使用 inlineformset factory 这可能吗 我还没有遇到过任何例子 我正在尝试在模板中显示 json data class RecipeIngredient models Model rec
  • 在Python中如何在多列超过2个变量之间进行相关?

    我有一个 Pandas Dataframe 如下所示 id cat1 cat2 cat3 num1 num2 1 0 WN 29 2003 98 2 1 TX 12 755 76 3 0 WY 11 845 32 4 1 IL 19 935
  • 无法读取未定义的属性“样式”——未捕获类型错误

    我想更改 html 页面的 span 元素中文本的颜色 字体大小和字体粗细 我正在使用以下代码 if window location href indexOf test gt 1 var search span document getEl
  • 无法更改 Android 上的单选按钮颜色

    我正在使用 Android Studio 我需要更改单选按钮的颜色 将按钮色调颜色值更改为我需要它在预览中工作的值后 但每当我在设备上启动应用程序时 按钮都是标准的绿色 蓝色 这是某种设备 API 级别问题吗 如果是这样 是否可以更改旧设备
  • DirectorySearch.PageSize = 2 不起作用

    using DirectorySearcher srch new DirectorySearcher String Format memberOf 0 p Target DistinguishedName srch PageSize 2 S
  • jQuery相当于XMLHttpRequest的上传?

    使用 HTML5 的文件 API 通过名为的对象进行上传upload in the XMLHttpRequest This是我正在使用的教程 以及谷歌缓存镜像因为目前它已关闭 这是相关部分 Uploading for Firefox Goo