Categories
Technology

2.0里的1.0

有个常用的Web功能,很难2.0化,它就是文件上传(File upload)。File upload是个标准的1.0样式的功能,由于要访问本地文件系统,什么JavaScript,Flash都很难做处理,做的好点就是hacking一下,效果模仿接近2.0一点,根本上说还是笨拙的。

在不使用无安全级别限制的重量级插件的情况下,全凭现有的W3C规范,突破这个瓶颈着实有点困难,更不要说提供上传进度监视等高级功能了。

我还没有仔细阅读过W3C的这个新的draft spec,不难看出有越来越多的人正在考虑优雅的解决这个问题,尽可能达到比较完美的2.0高度。

By Ling Zhang

本人服务于IBM中国软件实验室(上海)。本网页内容仅为个人思想,不代表IBM公司观点。

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的方法集成性弱了点,但稳定很多,实用。

[…] 转自张博的blog。想到写以前的项目,要做到Ajax,可是在文件上传这一步,始终没办法逾越。只能用 <form target=”…” enctype=”multi-part/form-data” method=”post” > … </form> <iframe name=”..”/> 这种提交到一个内部iframe的办法搞。而且上传结束的event只能通过服务器端返回的javascript调用,可以说要多难看有多难看。这个draft定义的API虽然简单,可是也够用咯~~ […]

Leave a Reply

Your email address will not be published.

*