如何为我的网络应用获取类似 Gmail 的文件上传？
Posted
技术标签:
【中文标题】如何为我的网络应用获取类似 Gmail 的文件上传？【英文标题】：How can I get Gmail-like file uploads for my web app? 【发布时间】：2010-09-13 04:52:15 【问题描述】：我想为我的一个项目添加类似 gmail 的文件上传功能。有人可以帮我解决这个问题吗？
我的应用程序是在 vb.net 中构建的。
我将不胜感激任何形式的帮助或指导。
谢谢
【问题讨论】：
Gmail 使用什么？闪光？框架？ 他们在大约 1-2 个月前切换到 Flash。至少在 gmail 中。 【参考方案1】：查看SWFUpload，它本质上是一个javascript api，用于flash 绝对优越的文件上传处理能力。在浏览器最终赶上之前最好的事情。
来自链接：
在对话框中通过 ctrl/shift-selecting 一次上传多个文件 所有事件的 Javascript 回调 开始上传前获取文件信息 使用 Xhtml 和 css 样式上传元素 使用 HTML 上传文件时显示信息 无需重新加载页面 适用于所有支持 Flash 的平台/浏览器。 如果 Flash 或 javascript 不可用 开始上传前控制文件大小 仅在对话框中显示选定的文件类型 队列上传，开始上传前删除/添加文件
Demos
--iframe 上传 -----
首先，您希望在您的页面上有一个 iframe。这用于服务器通信。您稍后会隐藏它，但现在，让它保持可见。给那个 iframe 一个 name 属性，比如“uploader”之类的。
现在，在您的表单中，将目标设置为 iframe 的名称，并将操作设置为您在服务器上接受文件上传的脚本（就像带有文件上传的普通表单一样）。在该表单内添加一个带有文本“添加文件”的链接。设置该链接以运行 javascript 函数，该函数将向表单添加新输入。这可以通过 DOM 完成，但我建议使用像 jquery 这样的 JavaScript 库。
将新文件输入添加到表单后，将该输入的模糊事件设置为 javascript 函数，该函数将提交表单，然后定期检查它的输出。读取 iframe 可能会很棘手，但这是可能的。
让您的文件上传脚本输出“完成”。或上传完成时的文件名或其他内容。
每隔一秒左右检查一次，直到有内容为止。获得内容后，终止计时器并将文件输入替换为文件名（或“文件上传”）或其他任何内容。
用 css 隐藏你的 iframe。
【讨论】：
【参考方案2】：来自 YUI！ （雅虎用户界面），https://yuilibrary.com/yui/docs/uploader/
在单个“打开文件”对话框中选择多个文件。 文件扩展名过滤器，方便用户选择。 文件上传的进度跟踪。 一系列文件元数据：文件名、大小、创建日期、修改日期和作者。 在文件上传过程的各个方面调度的一组事件：文件选择、上传进度、上传完成等。 在文件上传 POST 请求中包含附加数据。 由于修改了 SEND 缓冲区大小，宽带连接上的文件上传速度更快。 文件上传完成后的同页服务器响应。
完全免费
【讨论】：
这需要 Flash 才能工作，但这是一个可行的解决方案。 我不明白为什么这等于投反对票。 OP 从未指定不允许使用 flash。 我不知道你为什么会为此投票给某人。显然，决定使用需要 Flash 的组件的开发人员应该知道这个工具可能会限制那些没有安装它的少数用户，并且他们应该在这些情况下提供替代方案，否则这是一个很好的答案【参考方案3】：这里是 gmail uploader clone。这是 gmail 上传器的精确克隆，带有一些额外的功能。上传后可以看到图片的缩略图，拖动缩略图可以改变顺序，替换任意缩略图。它是使用 jQuery 完成的。 你可以看到演示here。源代码免费发至download in a single zip file。
我希望您可以轻松删除一些代码并获得想要的东西。如果您需要进一步的帮助，可以将 cmets 留在 ABCoder 博客上。
【讨论】：
【参考方案4】：对于非闪存解决方案，您可以使用NeatUpload。去年我在一个没有闪存要求的大型项目中使用了它。很容易集成到现有的解决方案中。我认为这是一件轻而易举的事。以我有限的经验，比在 ASP.NET 中使用 SWFUpload 更容易。可能是因为 NeatUpload 是专为 ASP.NET 构建的。
【讨论】：
【参考方案5】：您可以改用Flickr Uploader clone。
【讨论】：
【参考方案6】：您是在谈论没有整页回发的上传吗？看看http://www.phpletter.com/Demo/AjaxFileUpload-Demo/，它创建了一个隐藏的iframe，复制了输入控件，并使用iframe执行post获取服务器上的文件。
如果您正在寻找当用户单击“附加文件”并自动弹出文件浏览对话框时的行为，可以通过 Javascript 完成，但在具有要求的安全预防措施的 FireFox 中不起作用用户直接调用“浏览”按钮（而不是通过脚本以编程方式）。
对于“自动”上传，使用 Javascript 附加到“输入”控件的“值”属性的“更改”事件，以便在选择文件时执行。
【讨论】：
【参考方案7】：现在已经 2 年了，我在我的旧系统中使用了 uploadify，它运行良好。但您需要编写一些 hack 代码（例如保持会话）。
我建议您使用jquery upload，它是纯 HTML，没有 swf，没有会话问题，非常棒！
== 2013 年，我写的：
我正在考虑选择哪个，SWFupload 或uploadify。
但是在 SWFupload 的官方网站上，它说它还没有在积极的开发中，作者希望有一天 SWFupload 可以复兴......
所以...我决定尝试“uploadify”，它似乎支持许多选项，带有大量演示的回调。 （看了下它的源代码，我猜作者在他的“uploadify v3”中包装了“SWFupload v1”和“SWFupload v2”……）
还有this kind of uploaders 的完整列表。
【讨论】：
【参考方案8】：我想对“类似 Gmail”的文件上传做更多的说明。
你的意思是如果它坐了一会儿，它会自动将它附加到草稿上吗？
【讨论】：
我确实认为，如果 OP 澄清他喜欢和正在寻找的 GMail 文件上传的内容，那将是一个好主意......【参考方案9】：Gmail 的代码很难找到，但如果我不得不猜测，它就是这样工作的：
当您单击“附加另一个文件”时，它会插入一个常规输入类型的文件控件。在 IE 上，它还可能以编程方式触发“浏览”按钮上的单击事件，因此文件对话框立即打开（它在 Firefox 上不会这样做，而且我没有方便的 IE，但我相信 IE 允许这样做） 选择文件后，它会检测输入控件的更改事件，并启动计时器。 当计时器触发时，它会从表单中分离输入元素，并将其添加到隐藏 iframe 中的不同表单中，在主（可见）表单中放置一个简单链接。然后提交隐藏的 iframe 以上传文件。 （它也可能克隆输入元素，但我没有尝试过这是否有效。）【讨论】：
【参考方案10】：您可以为此使用 iFrames
【讨论】：
以上是关于如何为我的网络应用获取类似 Gmail 的文件上传？的主要内容，如果未能解决你的问题，请参考以下文章