将图像预加载到精细的上传器UI中

时间:2013-08-22 22:53:45

标签: javascript fine-uploader

最近我花了很多时间来获得优秀的上传者来开发一个正在开发的项目。 我有它使用一些自定义拖放顺序和其他选项(如删除)集成到精细上传器中的fileTemplate选项。

我想要实现的是当用户编辑包含这些图像的数据时,这些图像是在上载图像时预加载的。 所有上传的图像都显示为精美上传。

但是我找不到任何文档或帮助。我最初的构想是输出

中的fileTemplate代码的副本
<div id="fine-uploader"></div>

DIV。 但是,当初始化精细上传时,它会删除代码。我不需要预加载的代码被精细上传器初始化。只要我能让订单正常运作。

当然这必须是一种方法吗?有人知道吗? 我能想到的唯一方法是在上传初始化之后使用时髦的JS。 但我并不是100%确信这将是一个平稳的过程。

3 个答案:

答案 0 :(得分:1)

只需将HTML插入精细上传器ul列表元素即可实现所需的结果。只是基本的jquery。 IE

$('ul', $('#fine-uploader')).html(preload);

此HTML是精细上传成功UI html的克隆。我不得不重新编写额外的脚本来处理我添加的一些额外功能,但考虑到它最终是最小的。所有删除,拖放,重新下载都可以正常工作。在多个浏览器中进行测试,但尚未发现任何问题。不是优雅的方式,我喜欢编码,但到目前为止工作得很好。

答案 1 :(得分:0)

您的问题似乎超出了Fine Uploader所做和提供的范围。 Fine Uploader只是一个工具,可以帮助开发人员有效地在他们的网站上进行有效的文件上传工作。从这个意义上说,Fine Uploader会对KISS principle起作用。上传文件后,Fine Uploader并不真正关心你用它们做什么,事实上,对你的文件几乎没有什么能力。

根据我对您的问题的理解,您希望在用户离开并返回页面时再次呈现成功上传的文件。

我不知道您正在为您的Web应用程序使用的堆栈或您对所需内容的要求,所以这可能有点模糊,但您需要弄清楚如何保存'状态你的网络应用程序。有很多方法可以解决这个问题。也许在每次成功上传时,您都可以将URL保存到localstorage,cookie或远程数据库中的文件中。您必须实现一些代码来检索这些记录,然后从存储它们的服务器中获取它们,然后在页面上显示它们。

无论你采用哪种方式,都需要做一些工作。我的回答可能分为至少3个单独的问题(取决于您对Web技术的理解)。同样,在不知道您正在使用哪种技术的情况下,很难诊断并提供详细的解决方案。

答案 2 :(得分:0)

Mark's answer非常清楚地介绍了这一点,但我会对他在这里所说的内容进行扩展。

Shane,Fine Uploader是一种为现有Web应用程序提供跨浏览器文件上载支持的工具。它不是一个盒子里的交钥匙Web应用程序。也不应该。跨浏览器上传文件以及所有相关功能的问题非常复杂。您的要求与上传文件无关。它超出了任何跨浏览器文件上传工具的范围。这些是我根据您对您的要求的理解而做出的陈述,由于您没有提供太多细节,因此很难遵循。

文件上传后页面/组件被解除后,Fine Uploader的工作就完成了。如果您想为用户提供编辑现有文件的方法,那么您当然应该这样做,但您不应期望上传库可以帮助您解决此问题。 Fine Uploader不是一个通用的UI工具,也不是允许跨浏览器文件上传以及所有密切相关的功能的库。没有其他上传库也可以作为通用UI工具。如果您的应用程序设计依赖于上传工具来负责生成UI的随机部分并支持非上传相关功能,那么我强烈建议您重新评估Web应用程序的设计。

Fine Uploader的默认用户界面非常基本,只是真正设计用于向用户传播文件上传状态和处理密切相关的任务的任务。将此(或任何)上传库视为锤子。它非常适合敲击钉子。你似乎想要用相同的工具砸钉子和锯木头。我想我们可以把它作为锤子并在它的侧面添加锯齿状的平淡无奇,但是这会使得在敲击钉子和锯木头时使用工具变得不那么有效和笨拙。用锤子敲打钉子,用锯子切割木头。

最后,我有点担心或混淆你明显修改了fileTemplate选项以向库中添加“其他选项(例如删除)”。我不确定您是否知道删除文件已经是本机集成到库中的功能。我不确定你是否使用旧版本的库,如果你在文档中错过了这个,或者我误解了你。