如何为我的Web应用程序上传类似Gmail的文件?
我想为我的一个项目添加类似gmail的文件上传功能。有人可以帮我吗?
我的应用程序是在vb.net中构建的。
我将不胜感激任何帮助或者指导。
谢谢
解决方案
请查看SWFUpload,它本质上是一种JavaScript API,可以实现Flash绝对出色的文件上传处理功能。最好的事情,直到浏览器终于赶上。
来自链接:
Upload multiple files at once by ctrl/shift-selecting in dialog Javascript callbacks on all events Get file information before upload starts Style upload elements with XHTML and css Display information while files are uploading using HTML No page reloads necessary Works on all platforms/browsers that has Flash support. Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable Control filesize before upload starts Only display chosen filetypes in dialog Queue uploads, remove/add files before starting upload
演示版
---- iframe上传-----
首先,我们要在页面上放置一个iframe。这是用于服务器通信。稍后将其隐藏,但暂时将其保持可见。为该iframe提供一个名称属性,例如" uploader"或者其他名称。
现在,在表单中,将目标设置为iframe的名称,将操作设置为我们在服务器上拥有的将接受文件上传的脚本(例如带有文件上传的普通表单)。在该表单内添加带有文本"添加文件"的链接。设置该链接以运行javascript函数,该函数将向表单添加新的输入。这可以通过DOM来完成,但是我建议我们使用一个像jquery这样的javascript库。
将新文件输入添加到表单后,将输入的blur事件设置为将提交表单的javascript函数,然后定期检查该表单的输出。读取iframe可能很棘手,但是有可能。
让文件上传脚本输出"完成"。上传完成后输入文件名或者其他名称。
每隔一秒左右检查一次,直到发现内容为止。拥有内容后,请终止计时器并将文件输入替换为文件名(或者"文件已上载")或者其他名称。
使用CSS隐藏iframe。
从YUI开始! (雅虎用户界面),https://yuilibrary.com/yui/docs/uploader/
Multiple file selection in a single "Open File" dialog. File extension filters to facilitate the user's selection. Progress tracking for file uploads. A range of file metadata: filename, size, date created, date modified, and author. A set of events dispatched on various aspects of the file upload process: file selection, upload progress, upload completion, etc. Inclusion of additional data in the file upload POST request. Faster file upload on broadband connections due to the modified SEND buffer size. Same-page server response upon completion of the file upload.
完全免费
我想进一步澄清"类似于Gmail"的文件上传。
意思是说,如果它坐一会儿,它会自动将其添加到草稿上吗?
Gmail的代码很难找到解决方法,但是,如果我不得不猜测的话,这就是它的工作方式:
- 当我们单击"添加另一个文件"时,它将插入常规输入类型的文件控件。在IE上,它也可能会以编程方式触发"浏览"按钮上的click事件,因此文件对话框会立即打开(在firefox上不会执行此操作,并且我没有IE方便,但我相信IE允许这样做)
- 选择文件后,它将检测输入控件的更改事件,并启动计时器。
- 计时器触发时,它会将输入元素与表单分离,然后将其添加到隐藏的iframe中的其他表单中,从而在主(可见)表单中放置一个简单的链接。然后提交隐藏的iframe以上传文件。 (它也可以克隆输入元素,但我还没有尝试过是否可行。)
我们可以为此使用iFrame
对于非闪存解决方案,可以使用NeatUpload。去年,我在没有闪存要求的广泛项目中使用了它。集成到现有解决方案中非常容易。我认为与之共事是一件轻而易举的事。以我有限的经验,比在ASP.NET中使用SWFUpload更容易。可能是因为NeatUpload仅针对ASP.NET构建。
我们是在谈论没有整页回发的上传吗?看一下http://www.phpletter.com/Demo/AjaxFileUpload-Demo/,它创建了一个隐藏的iframe,复制了输入控件,并使用iframe执行发布以在服务器上获取文件。
如果我们正在寻找当用户单击"添加文件"并自动弹出文件浏览对话框时的行为,可以通过Java脚本完成此操作,但在FireFox中不起作用,这具有安全性,要求用户执行以下操作:直接调用"浏览"按钮(而不是通过脚本以编程方式)。
对于"自动"上传,请使用Javascript添加到"输入"控件的"值"属性的"更改"事件上,以便在选择文件时执行。
这是gmail上传器克隆。这是gmail上传器的精确克隆,带有一些额外的功能。上传后,我们可以看到图像的缩略图,拖动缩略图以更改顺序并替换任何缩略图。这是使用jQuery完成的。
我们可以在此处查看演示。源代码可在单个zip文件中免费下载。
我希望我们可以轻松删除一些代码并获得所需的东西。如果我们需要进一步的帮助,可以在ABCoder博客上发表评论。
我们可以改用Flickr Uploader克隆。