Html刷新后FineUploader中断

Question

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

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

问题在于，在用新的DIV替换旧DIV之后，FineUploader会中断。上传按钮不再打开FineUploader对话框。我通过评论用新DIV替换旧DIV的代码，然后手动刷新页面，我已经验证了这实际上是发生了什么。现在，通过打开文件上传对话框，上传按钮再次正常工作。因此，当替换DIV时，即使html相同，FineUploader似乎也不喜欢用新按钮替换旧按钮。

有没有办法重新诠释＆＃34; FineUploader到一个新按钮？我该怎么做？

感谢。

Answer 1

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

如果您想添加新按钮，则有两种选择：

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

在您的特定情况下，不要替换整个元素集，而是考虑使用JavaScript来更新src元素的<img>属性，并使用服务器中的新URL。只要服务器在上传响应中返回新URL，您就可以在Fine Uploader onComplete callback handler中轻松获取此信息。或者您可以随时向服务器发出ajax请求，并使用回复中的网址替换src上的<img>。