有个常用的Web功能，很难2.0化，它就是文件上传(File upload）。File upload是个标准的1.0样式的功能，由于要访问本地文件系统，什么JavaScript，Flash都很难做处理，做的好点就是hacking一下，效果模仿接近2.0一点，根本上说还是笨拙的。
在不使用无安全级别限制的重量级插件的情况下，全凭现有的W3C规范，突破这个瓶颈着实有点困难，更不要说提供上传进度监视等高级功能了。
我还没有仔细阅读过W3C的这个新的draft spec，不难看出有越来越多的人正在考虑优雅的解决这个问题，尽可能达到比较完美的2.0高度。
5 replies on “2.0里的1.0”
几个我知道做的不错的Web 2.0 style file upload:
* http://www.box.net 经典的网络存储。听说近期不能免费注册了。可以选择多个本地文件，一起上传，并看到每个的进度。没有明显Flash/Applet的迹象
* Google, google的很多服务如gmail, google pages都可以很方便的上传文件，选定文件后他就在后台慢慢upload
* goowy.com, 一个用纯Flash制作的webtop. 他实现了一份Flash版的Box.net上传UI。可以监控上传进度或取消队列中尚未开始传送的文件
其实Web2.0的应用不一定非要用网页做，想Google docs这样，你可以往一个特殊的email地址发送文件，附件或正文自动就成为在线文档。这也非常符合2.0那种Open API, Open Data的概念。
更正一下，看了一下box.net的代码，他其实借用了Flash8之后新引入的文件上传类.
在页面上放一些层，指定一个ID
然后插入一个width=height=0的Flash movie:
http://www.box.net/static/flash/upload_new.swf
这个Flash与页面JS通讯，并把上传进度更新给页面div
function exportProgress() {
var _local1 = new Array ();
_local1[0] = totalBytesLoaded;
_local1[1] = totalBytesTotal;
res = String (flash.external.ExternalInterface.call(“setProgress”, _local1));
}
var listener = new Object ();
。。
listener.onProgress = function (file, bytesLoaded, bytesTotal) {
setTotalBytesLoaded(file, bytesLoaded);
exportProgress();
};
..
var fileRef = (new flash.net.FileReferenceList());
fileRef.addListener(listener);
…
flash.external.ExternalInterface.addCallback(“removeFile”, null, methodRF);
flash.external.ExternalInterface.addCallback(“uploadFiles”, null, methodU);
flash.external.ExternalInterface.addCallback(“clearFileList”, null, methodCFL);
flash.external.ExternalInterface.addCallback(“browse”, null, methodB);
flash.external.ExternalInterface.addCallback(“cancelUpload”, null, methodCU);
不错的资源。我对Web file upload感觉是整个过程不robust，像走钢丝，用non-web client的方法集成性弱了点，但稳定很多，实用。
试试这个网站, http://filesfly.com/ . try to upload a file, 然后你就会看见一个很棒的对上传进度的监控.
[…] 转自张博的blog。想到写以前的项目，要做到Ajax，可是在文件上传这一步，始终没办法逾越。只能用 <form target=”…” enctype=”multi-part/form-data” method=”post” > … </form> <iframe name=”..”/> 这种提交到一个内部iframe的办法搞。而且上传结束的event只能通过服务器端返回的javascript调用，可以说要多难看有多难看。这个draft定义的API虽然简单，可是也够用咯~~ […]