Blueimp文件上传,如何知道进度回调是针对哪个文件的?

2024-04-14

你如何知道进度回调是针对哪个文件的?

即使我将equentialUploads设置为true,但仅在IE10中(而不是Chrome/FireFox/Safari),当我选择同时上传多个文件时,add回调中的data.files数组包含多个文件。对于所有其他浏览器,添加回调会为每个文件调用一次,数组始终只有 1 个文件。

所以我做了一个for循环来处理add回调中的每个文件,没问题。

但是,现在我正在更新进度回调,但我看不到任何方法来知道进度是针对哪个文件的。回调获取 2 个参数,“e”和“data”,并且数据对象已加载并提供了进度的总计值...但是对于哪个文件?一些处理回调有 data.index 来告诉你它是哪个文件,但上传进度没有。

这只是缺少功能,还是我缺少某些东西?

我的代码现在有点难看,因为我正在尝试解决这些新的 IE10 问题。在此之前,我只是指望 data.files 数组始终只有 1 个项目。无论如何,这是我的代码,当我有机会时我会尝试清理它:

self.initFileUpload = function(elem) {
         $(elem).fileupload({
             dataType: 'json',
             global: false,
             sequentialUploads: true,
             forceIframeTransport: !!ie,
             formData: { hostSID: app.viewModels.main.hostSID() },
             done: function(e, data) {
                 for (var x = 0; x < data.result.files.length; x++) {
                     var file = data.result.files[x];
                     var u = file.myObj;
                     u.sid = file.sid;
                     console.log("done: " + u.filename);
                     u.done(true);
                 }
             },
             add: function(e, data) {
                 for (var x = 0; x < data.files.length; x++) {
                     var file = data.files[x];
                     var u = [];
                     u.filename = file.name;
                     u.size = file.size;
                     u.perc = ko.observable(0);
                     u.error = ko.observable("");
                     u.done = ko.observable(false);
                     var ext = file.name.split('.').pop().toLowerCase();
                     u.image = utils.isImageExt(ext);
                     self.uploads.push(u);
                     file.myObj = u;
                     u.jqXHR = data.submit();
                 }
             },
             fail: function(e, data) {
                 for (var x = 0; x < data.result.files.length; x++) {
                     var file = data.result.files[x];
                     var u = file.myObj;
                     if (data.jqXHR && data.jqXHR.responseText)
                         u.error(data.jqXHR.responseText);
                     else
                         u.error("Unknown Error");
                     console.log("fail: " + u.filename);
                 }
             },
             progress: function(e, data) {
                 console.log(e);
                 console.log(data);
                 for (var x = 0; x < data.files.length; x++) {
                     var file = data.files[x];
                     console.log(file);
                     var u = file.myObj;
                     u.perc(parseInt(file.loaded / file.total * 100, 10));
                     console.log("perc: " + u.filename + " " + u.perc());
                 }
             },
             progressall: function(e, data) {
                 self.uploadPerc(parseInt(data.loaded / data.total * 100, 10));
             }
         });
     }

“fileuploadprogress”回调包括 data.context。这是您可能在“fileuploadadd”回调中创建的标记的 jquery 对象。

您可以在“fileuploadadd”回调中添加进度元素(或任何其他提供反馈的标记),然后在“fileuploadprogress”中再次找到它并设置进度:

.on('fileuploadadd', function (e, data) {
    $.each(data.files, function (index, file) {
        data.context = $('<div/>', { class: 'pull-left text-center media_wrapper' }).appendTo('#thumbnails');
        $('<progress>', { value: '0', max: '100'}).appendTo(data.context)
    });
})
/* ... */
.on('fileuploadprogress', function (e, data) {
    if (data.context) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        data.context.find('progress').attr('value', progress);
    }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Blueimp文件上传,如何知道进度回调是针对哪个文件的? 的相关文章

  • MouseOver CSS3D效果与javascript

    我正在尝试实现这样的 mouseOver 效果 我能够根据每个图块的位置生成所需的 css3d 矩阵 我通过缓慢的鼠标移动实现了这种效果 但是如果我从一个图块快速移动到另一个图块 则它无法正确更新 它在瓷砖之间显示出间隙 更新鼠标悬停时所有
  • 从 contenteditable div 获取价值

    到目前为止 我一直使用文本区域作为表单的主要输入 我已将其更改为使用contenteditablediv 因为我想允许一些格式 以前 当我有文本区域时 可以使用 Ajax 和 PHP 很好地提交表单 现在我已经将其更改为使用 content
  • 使用 jQuery 显示 POST 数据?

    我正在使用闪光灯网络摄像头拍照 它工作得很好 并通过 POST 返回一个 URL 我正在用 PHP 进行编码 并希望在收到该 POST 数据后显示该数据 问题是我不重新加载页面 我环顾四周 不确定是否动态加载这个数据数组 我应该去哪里寻找
  • jquery是如何实现$(document).ready()的?

    jquery是如何实现的 document ready 当然我可以阅读代码 但我正在寻找这个概念 概念 jQuery ready http api jquery com ready 虽然 JavaScript 提供了在渲染页面时执行代码的
  • 是否可以使用 jQuery 从 SQL Server 检索数据?

    是否可以使用 jQuery 从 SQL Server 检索数据并使用 HTML 控件显示数据 jQuery 被设计为在浏览器环境中运行 所以这是一个具有 DOM 的环境 具有 JavaScript 支持 显然 等等 要从 MS SQL Se
  • 关闭彩盒

    我有一个简单的弹出窗口 不是 Iframe 用户可以在其中互相发送邮件 有一个用于发送信息的提交按钮和一个用于关闭叠加层的取消按钮 我确实在关闭按钮工作时遇到了一些麻烦 代码如下所示
  • jquery:卸载还是卸载之前?

    当用户从当前页面导航时 我想向服务器发布一条消息 我现在正在使用 unload 但结果不可靠 即使在其文档中也是如此 卸载事件的准确处理 各个版本都有所不同 浏览器 例如 某些版本 Firefox 的触发事件当 链接已被跟踪 但当 窗口已关
  • 无法将 event.target 转换为字符串

    为了识别用户单击的元素 我尝试使用事件对象target document click function e var str e target toString console log str if str indexOf some clas
  • JQuery:如果自定义类包含大于“x”的数字,请添加 CSS 代码

    我想将 css 添加到指定的跨度类 如果它包含高于 55 的数字 而且这必须在页面加载上而不是按钮触发器上 谢谢任何帮助都会很棒 示例如下 目前不起作用 span class subTotalPrice 10 span span class
  • 在 Asp.net Core 中使用 Ajax 验证表单

    我使用 AJAX 将表单发送到 ASP NET Core 中的控制器 但在发送带有验证的表单时遇到问题
  • 处理多个切换

    我陷入了一个toggle 噩梦 终于寻求帮助 我想要的很简单 我有三个链接 a showcountries bronze a showcountries silver a showcountries gold 和三个盒子 countries
  • 按键时从文本区域获取最后一行

    我有一个文本区域字段 在每次按键时 我想将文本区域中的最后一行推送到数组中 目前 我正在每次按键时构建数组以获取文本区域中的最后一行 有没有办法优化这个 意思是 无需构造数组即可获取文本区域中的最后一行 jQuery mytextarea
  • jQuery 1.9.1 无法获取未定义或空引用的属性“createDocumentFragment”第 5823 行

    最近我更新了我的 ASP Net MVC4 项目以升级到 jQuery 1 9 1 但从那时起 只要加载任何页面 我就会收到一个奇怪的错误 Chrome jquery 1 9 1 js 5823 Uncaught TypeError 无法调
  • Summernote onKeyup 事件未按预期工作

    我将 Summernote 编辑器应用于文本区域 我希望当我在编辑器中键入一些文本时 该文本应反映在 div 中 因此我有一个文本区域和一个 div result 其中应在每次按键时写入更改事件
  • 升级到v1.5时jquery ajax出错

    我从 v1 4 4 升级到 v1 5 我想我已经发现了下面的问题 document ready function Get token on page load update csrf token 该函数看起来像这样 EDITED funct
  • 自动完成请求/服务器响应是什么样的?

    这似乎是一个黑洞 经过一个小时的搜索jQuery用户界面 http en wikipedia org wiki JQuery UI网站 Stack Overflow 和谷歌搜索 我还没有找到如何编写的最基本信息服务器端自动完成的 向服务器传
  • jQuery 的 event.stopPropagation() 导致 Rails 出现问题:remote => true

    我创建了一些自定义 弹出窗口 最初使用 display none 样式 它们通过相邻的 popup trigger 链接进行切换 具有以下汇总功能 public javascripts application js jQuery docum
  • 如何为 HTML 验证提供自定义验证错误消息?

    当我使用默认 HTML 验证时 它会显示默认错误消息 这不是我想向客户显示的 我需要自定义消息并为每个验证提供不同的信息 例如最小 最大 类型和要求 例如 该字段为必填项 值不匹配 参考传统的HTML代码
  • 如果我想让我的网站跨平台兼容和屏幕阅读器兼容,我应该避免使用 javascript 、 jquery 、 flash 、 ajax 、 silverlight 吗?

    如果我想让我的网站跨平台兼容 PC iPHONE 其他手机 PDA 和 Accessible 兼容屏幕阅读器 我是否应该避免使用 JavaScript jQuery flash Ajax Silverlight 我应该只使用 xhtml c
  • 如何在禁用按钮上启用 Bootstrap 工具提示?

    我需要在禁用的按钮上显示工具提示 并在启用的按钮上删除它 目前 它的工作原理是相反的 扭转这种行为的最佳方法是什么 rel tooltip tooltip

随机推荐