FineUploader 在 Html 刷新后中断

FineUploader breaks after Html refresh

我正在试用 FineUploader 的功能。我有 DIV,其中包含上传按钮和图像元素。

图片上传后,我在服务器端渲染一个新的DIV,然后用新的替换旧的DIV。新 DIV 在图像元素中包含新图像 url,因此用户会在页面上看到刷新的图像。

问题是,在我用新的 DIV 替换旧的 DIV 之后,FineUploader 就坏了。上传按钮不再打开 FineUploader 对话框。通过注释掉用新 DIV 替换旧 DIV 的代码,然后简单地手动刷新页面,我已经验证这确实是正在发生的事情。现在,通过打开文件上传对话框,上传按钮再次正常工作。因此,当 DIV 被替换时,FineUploader 似乎不喜欢将旧按钮替换为新按钮,即使 html 是相同的。

有没有办法"rebind" FineUploader 到一个新的按钮?我该怎么做?

谢谢。

Fine Uploader 在可见的上传按钮中嵌入了 "hidden" <input type="file">(在您的情况下显然是 <div>)。即使您将 container/button 替换为包含另一个隐藏 <input type="file"> 的新文件,Fine Uploader 绑定到原始文件输入的所有数据和事件处理程序现在都消失了,因此 Fine Uploader 不知道何时选择了新文件,它无法在它也可能负责控制的页面上的其他文件输入中跟踪该按钮。

如果您想添加新按钮,您有两个选择:

  1. 在创建 Fine Uploader 实例时通过 the extraButtons option 声明这些按钮。您可以 show/hide 这些额外的按钮或根据需要在页面上移动它们。
  2. 创建您自己的文件输入按钮,附加一个更改事件侦听器,然后使用 the addFiles API method.
  3. 将在该事件处理程序中选择的任何文件添加到 Fine Uploader

在您的特定情况下,与其替换整个元素集,不如考虑简单地使用 JavaScript 将 <img> 元素的 src 属性更新为新的 [=41] =] 从您的服务器。您可以在 Fine Uploader onComplete callback handler 中轻松获取此信息,前提是您的服务器 returns 上传响应中的新 URL。或者您可以随时向您的服务器发出 ajax 请求,并在响应中使用 URL 替换 <img>.

上的 src