如何重置 blueimp jQuery 文件上传插件?

2023-12-31

要旨:如何重置 blueimp jQuery 文件上传插件,使其认为尚未上传任何文件?

我的场景

  • 我有一个上传表单,只允许上传一个文件。
  • 文件上传后,就会对其进行分析。此时,用户可以选择单击“取消”按钮,我可以在其中重置视图模型的其余部分。
  • 当用户单击“取消”时,我想重置用户上传的文件数,因为它们本质上是全新的。
  • 我仍然希望重置后最多应用一个文件。

目前发生了什么

  • 上传一个文件
  • 单击取消按钮,一切重置(即我重新初始化文件上传控件)
  • 尝试上传文件,但仍然被告知已达到最大文件数。

我尝试过的

我尝试调用 fileupload('destroy') 然后重新初始化,但这似乎没有结果(我希望销毁也会破坏实例的跟踪)。

我的问题:

  • 销毁/重新初始化/重置上传控件的最佳方法是什么,就像从头开始一样?
  • 如果没有,是否有任何方法可以以编程方式使 blueimp 认为在已经上传了零个文件后已上传了零个文件,以有效地重置它? 预先感谢您提供的任何帮助!

关于版本的说明:

仅供参考,我使用的是 v8.8.1——我不想升级,因为一位同事以特定方式更改了一些代码——呃。我们计划删除此自定义并升级,但会在预定日期进行。如果我必须更新才能解决此问题,请随时告诉我,因为这是完全公平的。

更新:一些代码

页面第一个文件上传控件:

<form id="summaryFileUploadForm" action="/api/InvoiceDetailsFile/PostForProcessing" method="POST"
    enctype="multipart/form-data" data-bind="disableFileUpload: InvoiceHasSummaryDocument() || (!InvoiceDataIsFilledIn())">

    <div class="fileupload-buttonbar">
        <div class="fileupload-buttons">

            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="fileinput-button">
                <span>Add files...</span>
                <input id="file" type="file" name="file" />
            </span>

            <span class="fileupload-loading"></span>
        </div>
        <!-- The global progress information -->
        <div class="fileupload-progress fade" style="display: none">
            <!-- The global progress bar -->
            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
            <!-- The extended global progress information -->
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <div data-bind="fadeVisible: InvoiceHasSummaryDocument()">
        <span class="ui-icon ui-icon-check float-left"></span><span>A summary document has been uploaded.</span>
    </div>
    <span data-bind="fadeVisible: (!InvoiceDataIsFilledIn())">Please fill out invoice information before uploading a file.</span>
    <!-- The table listing the files available for upload/download -->
    <table role="presentation">
        <tbody class="files" id="Tbody1"></tbody>
    </table>

    <script id="summaryFileDownloadTemplate" type="text/x-tmpl">

    </script>
</form>

页面第二个文件上传控件:

<form id="detailsFileUploadForm" action="/api/InvoiceDetailsFile/PostForProcessing" method="POST"
    enctype="multipart/form-data" data-bind="disableFileUpload: Invoice().DetailItems().length > 0 || (!InvoiceHasSummaryDocument())">

    <div class="fileupload-buttonbar">
        <div class="fileupload-buttons">

            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="fileinput-button">
                <span>Add files...</span>
                <input id="file" type="file" name="file" />
            </span>

            <span class="fileupload-loading"></span>
        </div>
        <!-- The global progress information -->
        <div class="fileupload-progress fade" style="display: none">
            <!-- The global progress bar -->
            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
            <!-- The extended global progress information -->
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <span><strong>NOTE: </strong>Only Excel 2007+ (.xlsx) files are accepted. <a href="<%= ResolveUrl("~/asset/xlsx/Ligado_InvoiceUploadTemplate_Standard.xlsx") %>" target="_blank" id="A1">Need a blank Invoice Upload template?</a><br />
    </span>
    <span data-bind="fadeVisible: Invoice().DetailItems().length > 0">Invoice details have been uploaded.</span>
    <span data-bind="fadeVisible: (!InvoiceHasSummaryDocument())">Please upload a summary file prior to uploading a details file.</span>

    <!-- The table listing the files available for upload/download -->
    <table role="presentation">
        <tbody class="files" id="fileList"></tbody>
    </table>
    <script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade" style="display:none">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
                <div><span class="error">Error:</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
                <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
            {% } %}
        </td>
        <td>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
                <button class="start">Start</button>
            {% } %}
            {% if (!i) { %}
                <button class="cancel">Cancel</button>
            {% } %}
        </td>
    </tr>
{% } %}
    </script>

    <script id="template-download" type="text/x-tmpl">

    </script>
</form>

我可以使用以下方法清除第一个控件:

    $("tbody.files").empty();

大概是因为此时文件已经上传(这很好)。

但是,这不适用于第二种形式。我努力了:

    $("#detailsFileUploadForm").find('.cancel').click();

这会使这些项目从页面中消失,但在添加其他文件时它们会重新出现。

我也尝试过$("#detailsFileUploadForm").fileupload('destroy')没有成功(大概是因为它不处理这些函数并且更多地与绑定有关。


这个问题的答案比我想象的要简单得多:

$("table tbody.files").empty();

以前,我认为我做得太多了——尝试销毁/重置容器并没有奏效。

通过这一行代码,列表似乎已重置,据我所知,一切都运行良好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何重置 blueimp jQuery 文件上传插件? 的相关文章

随机推荐

  • 提前终止工作人员 puma 日志意味着什么?为什么会发生这种情况?

    对于我的 Elastic Beanstalk 实例 我得到了504每当我访问它时状态代码响应 当我跟踪日志时 我在 puma 应用服务器上看到以下日志 gt var log puma puma log lt 27240 Early term
  • 在 PL/SQL 中将 varchar2 转换为日期 ('MM/DD/YYYY')

    我需要将字符串从 varchar 转换为 MM DD YYYY 格式的日期 我的输入字符串是 4 9 2013 我的预期输出是 04 09 2013 即 2 位月份 2 位日期和 4 位年份 以 分隔 我有以下数据 DOJ varchar2
  • 为什么提供静态文件不安全

    这可能是一个愚蠢的问题 并且有一个明显的答案 但我正在测试 404 和 500 错误处理程序 这意味着我必须将 debug 切换为 False 我进入 Django 管理页面 注意到没有提供静态文件 我知道它们应该通过 Apache 路由
  • iOS 7.1 滑动解锁文字动画

    我不确定以前是否有人问过这个问题 但我很难找到它 也许我没有使用正确的搜索词 所以如果答案已经存在 如果有人能指出我正确的方向 我将不胜感激 我刚刚注意到 随着 iOS 7 1 的更新 锁屏 滑动解锁 文本上的闪烁动画发生了变化 聚光灯现在
  • 什么时候编写“ad hoc sql”与存储过程更好[重复]

    这个问题在这里已经有答案了 我的应用程序中有 100 的即席 SQL 我的一个朋友建议我转换为存储过程以获得额外的性能和安全性 这在我脑海中提出了一个问题 除了速度和安全性之外 还有其他理由坚持使用即席 SQL 查询吗 SQL Server
  • 将 Camunda 嵌入现有 Java 应用程序

    我已经提取了 Camunda 最新映像并在它自己的 docker 容器中运行 Camunda 我有一个 dmn 上传到 Camunda Cockpit 并且我能够进行 Rest 调用以从我上传到 Camunda Cockpit 的决策表中获
  • 错误:访问属性“处理程序”的权限被拒绝

    我有一个 Firefox 的 Greasemonkey 脚本 昨天运行得很好 我今天尝试使用它 没有修改代码 我注意到它停止工作 经过进一步检查 脚本现在抛出以下错误 Error Permission denied to access pr
  • 我可以将 cperl 模式与 perl 模式着色一起使用吗?

    Emacs cperl 模式似乎比 perl 模式更容易混淆 但彩虹糖效应使该东西对我来说无法使用 有谁知道或知道 emacs 块的示例 该示例使 cperl mode 使用 perl mode 的着色 理想情况下以一种足够可读的形式 以便
  • 寻找适合企业网站的轻文本富编辑器,比tinymce更轻,带有用于评论表单的基本按钮

    我正在寻找适合企业网站的轻文本富编辑器 比tinymce更轻 带有用于评论表单的基本按钮 重要的是编辑器也可以在 IE6 中运行 到目前为止 我尝试使用 cleditor 15KB 但当按 enter 键时 IE 出现问题 客户有问题 Jq
  • EmberJS 使用 HasMany 取消(回滚)对象

    假设我有一个 ParentObjecthasMany项目 我想在我的应用程序中实现取消功能Add将回滚所有内容的路线 简而言之 我有 父对象IsNew and IsDirty 并且有可能 项目 也将是IsNew and IsDirty 所以
  • 使用 like 关键字在单个查询中匹配多个标题

    使用 like 关键字在单个查询中匹配多个标题 我正在尝试获取与给定标题匹配的所有记录 下面是数据库的结构请参阅 数据库截图 https prnt sc JduJ6NSIr1E 当我传递单个类似查询时 它返回数据 Query SELECT
  • 聚焦离子输入时有没有办法隐藏键盘?

    我想要一个可以聚焦的离子输入 并且键盘不应该出现 有什么办法或者有可能吗 谢谢你 是的 安装这个插件 gt https ionicframework com docs native keyboard https ionicframework
  • 在Scheme中注释代码

    我正在查看一些代码Scheme from Festival并且似乎无法弄清楚评论 目前 我可以看到 and 用于指示注释行 网络上的其他来源表明上面的一些可能是指示多行注释的方法 我的问题是 有什么区别 and 用于发表评论 什么时候应该使
  • mvc 和 webapi 之间的身份验证(单独的域/应用程序)

    我正在为以下场景寻找好的想法 资源 实现 MVC 网站位于http mywebsite com http mywebsite com Webapi REST 服务位于http myapi com http myapi com 重要信息 请注
  • 如何为 Arduino IDE 安装 openCV 库?

    我正在开发一个使用面部跟踪 对象跟踪 面部识别等的 Arduino 项目 为了实现这一目标 我决定使用 OpenCV 库 然而问题是 我不知道如何安装 Arduino 和处理的 OpenCV 库 谁能告诉我该怎么做 谢谢 如果您使用的是处理
  • 绘制多条路线谷歌地图

    我想根据Google中的路线服务绘制多条路线 代码如下 p s Data是我从json调用中获得的列表 for i 0 i lt 20 i route data i start new google maps LatLng route fr
  • Visual C# Studio 项目中的哪些文件不需要版本控制?

    我是 Visual C Studio 的新手 实际上使用的是 Express 版本 但另一个开发人员正在使用完整版本 并且我们正在使用版本控制 svn 将项目文件添加到存储库对我来说是可以接受的 因为此存储库仅适用于我们两个使用 Visua
  • 为什么我的 vscode 光标在 div 周围显示一个块

    一旦我进入 DIV 标签或任何函数 我的 vscode 就会在这些标签周围显示一个空白框 在此输入图像描述 https i stack imgur com GhhQ2 png我也添加了一张图片 有人可以帮我禁用这个吗 所以我只能看到光标 看
  • tf.keras - 尽管使用 GPU 内存,但第一个时期的训练并未取得进展

    我一直在尝试训练使用 Keras 的 Tensorflow 实现编写的 CNN 看起来训练在到达第一个 epoch 时就陷入了困境 尽管根据 nvidia smi 的说法 我的 GPU 似乎仍在使用内存 也没有错误消息或回溯打印到终端 这使
  • 如何重置 blueimp jQuery 文件上传插件?

    要旨 如何重置 blueimp jQuery 文件上传插件 使其认为尚未上传任何文件 我的场景 我有一个上传表单 只允许上传一个文件 文件上传后 就会对其进行分析 此时 用户可以选择单击 取消 按钮 我可以在其中重置视图模型的其余部分 当用