如何为我的网络应用程序上传类似Gmail的文件？

Question

我想为我的一个项目添加类似gmail的文件上传功能。有人可以帮我吗？

我的应用程序是在vb.net中构建的。

我希望得到任何帮助或指导。

由于

Answer 1

查看SWFUpload，这本质上是一个javascript api，闪存绝对优秀的文件上传处理功能。最好的事情，直到浏览器终于​​迎头赶上。

来自链接：

  

  
• 通过对话框中的ctrl / shift-selection一次上传多个文件
  
• 所有活动的Javascript回调
  
• 上传开始前获取文件信息
  
• 使用XHTML和css
设置上传元素   
• 使用HTML
上传文件时显示信息   
• 无需重新加载页面
  
• 适用于所有支持Flash的平台/浏览器。
  
• 如果是Flash或者，则优雅地降级到正常的HTML上传表单   javascript不可用
  
• 上传开始前控制文件大小
  
• 仅在对话框中显示所选的文件类型
  
• 队列上传，在开始上传之前删除/添加文件
  

Demos

----- iframe上传-----

首先，您希望页面上有iframe。这适用于服务器通信。你稍后会隐藏它，但是现在，让它保持可见。给iframe一个名称属性，比如“uploader”或者什么。

现在，在您的表单中，将目标设置为iframe的名称，并将操作设置为您将接受文件上载的服务器上的脚本（如带文件上载的普通表单）。在该表单中添加文本“添加文件”。设置该链接以运行javascript函数，该函数将向表单添加新输入。这可以通过DOM完成，但我建议使用像jquery这样的javascript库。

将新文件输入添加到表单后，将该输入的blur事件设置为将提交表单的javascript函数，然后定期检查输出。阅读iframe可能很棘手，但这是可能的。

让文件上传脚本输出“完成”。或上传完成后的文件名或其他内容。

每隔一秒检查一次，直到有内容为止。获得内容后，请终止计时器并将文件输入替换为文件名（或“文件已上传”）或其他内容。

使用css隐藏您的iframe。

Answer 2

来自YUI！ （Yahoo用户界面），https://yuilibrary.com/yui/docs/uploader/

  

  
1. 在单个“打开文件”对话框中选择多个文件。
  
2. 文件扩展名过滤器，方便用户选择。
  
3. 文件上传的进度跟踪。
  
4. 一系列文件元数据：文件名，大小，创建日期，修改日期和作者。
  
5. 在文件上传过程的各个方面调度的一组事件：文件选择，上传进度，上传完成等。
  
6. 在文件上传POST请求中包含其他数据。
  
7. 由于修改后的SEND缓冲区大小，宽带连接上的文件上传速度更快。
  
8. 完成文件上传后的同页服务器响应。
  

完全免费

Answer 3

以下是 gmail uploader clone 。这是gmail uploader 的完全克隆，带有一些额外的功能。您可以在上传后看到图像的缩略图，拖动缩略图以更改顺序并替换任何缩略图。它是使用 jQuery 完成的。 您可以看到演示here。源代码免费download in a single zip file。

我希望您可以轻松删除一些代码并获得所需的内容。如果您需要进一步的帮助，可以在ABCoder博客上发表评论。

Answer 4

对于非Flash解决方案，您可以使用NeatUpload。我去年在一个广泛的项目中使用它，没有闪光要求。它很容易集成到现有的解决方案中。我认为这是一件轻而易举的事。在我有限的经验中，比在ASP.NET中使用SWFUpload更容易。可能是因为NeatUpload是专为ASP.NET构建的。

Answer 5

你是在谈论没有整页回发的上传吗？查看创建隐藏iframe的http://www.phpletter.com/Demo/AjaxFileUpload-Demo/，复制输入控件，并使用iframe执行帖子以获取服务器上的文件。

如果您正在寻找用户点击“附加文件”并自动弹出文件浏览对话框的行为，可以通过Javascript完成，但在FireFox中无法使用，FireFox具有安全预防措施用户直接调用“浏览”按钮（而不是通过脚本以编程方式）。

对于“自动”上传，使用Javascript附加到“input”控件的“value”属性的“change”事件，以便在选择文件时执行。

Answer 6

您可以改为使用Flickr Uploader克隆。

Answer 7

现在已经2年了，我在遗留系统中使用了uploadify，效果很好。但你需要编写一些黑客代码（比如保持会话）。

我建议你使用jquery upload，这是纯HTML，没有swf，没有会话问题，真的很棒！

== 2013年，我写的：

我正在考虑选择哪个，SWFupload或uploadify。

但是在SWFupload的官方网站上，它表示它还没有得到积极的开发，而且作者希望有一天SWFupload能够恢复......

所以...我决定尝试“uploadify”，它似乎支持许多选项，有很多演示的回调。 （检查完源代码后，我猜作者在他的“uploadify v3”中包装了“SWFupload v1”和“SWFupload v2”...）

并且有this kind of uploaders的完整列表。

Answer 8

我想进一步澄清“类似Gmail”的文件上传。

你的意思是如果它稍微坐下，它会自动将它附加到草稿上吗？

Answer 9

Gmail的代码很难找到解决方法，但如果我不得不猜测，这就是它的工作原理：

• 当您单击“附加另一个文件”时，它会插入常规输入类型文件控件。在IE上，它也可能以编程方式触发“浏览”按钮上的单击事件，因此文件对话框立即打开（它不在Firefox上执行此操作，我没有IE方便，但我相信IE允许这样做）
• 选择文件后，它会检测输入控件的更改事件，并启动计时器。
• 当计时器触发时，它会从表单中分离输入元素，并将其添加到隐藏iframe中的其他表单，并在主（可见）表单中放置一个简单链接。然后提交隐藏的iframe以上传文件。 （它也可能克隆输入元素，但我还没有尝试过这是否有效。）

Answer 10

您可以将iFrame用于此