文件上传的渐进式增强.docxVIP

文件上传的渐进式增强作者: /阮一峰 发布时间: 2012-08-11 22:37 阅读: 183 次 /blog/2012/08/file_upload.html原文链接 /kb/153741/全屏阅读　 javascript:add_to_wz()[收藏] 　文件上传是最古老的互联网操作之一。　20多年了，它几乎没变，还是原来的样子：操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代，显得非常落伍。　网页开发者们想了很多办法，试图提升文件上传的功能和操作体验，在各种 Javascript 库的基础上，开发了五花八门的插件。可是，由于不同浏览器之间的差异，缺乏统一接口，这些插件要么用起来很麻烦，要么不能普遍适用。　HTML5提供了一系列新的浏览器 API，使得文件上传有可能出现革命性变化。英国程序员 /Remy Sharp 总结了这些/drag-and-drop-to-server/新的接口，本文在他的文章基础上，讨论如何采用 HTML5 的 API，对文件上传进行渐进式增强，实现以下功能：iframe 上传ajax 上传进度条文件预览拖放上传　为了对这些功能有一个感性认识，你可以先看看 Remy Sharp 提供的范例。　虽然这些 API，还没有得到广泛部署，但它们是未来的潮流。有了它们，代码就可以写得非常优雅简洁，上面五个功能都能在 20 行以内实现。　一、传统形式　让我们从最基本的开始。　文件上传的传统形式，是使用表单元素 file：form action=upload.php method=post enctype=multipart/form-data input type=file name=upload / br /input type=submit value=Upload //form　所有浏览器都支持上面的代码。它在 IE 浏览器中，显示如下：　用户先选择文件，然后点击Upload按钮，文件开始上传。　二、iframe 上传　传统的表单上传，属于同步上传。也就是说，点击上传按钮后，网页锁死，用户只能等待上传结束，然后浏览器刷新，跳到表单的 action 属性指定的网址。　有没有办法异步上传，在网页不重载的情况下，完成整个上传过程呢？　在 HTML5 没有出现之前，只能使用 iframe 做到这一点。用户点击 submit 时，动态插入一个 iframe 元素（以下代码使用了 jQuery 函数库）。var form = $(#upload-form);form.on (submit,function () {　// 此处动态插入 iframe 元素});　插入 iframe 的代码如下：var seed = Math.floor(Math.random() * 1000);var id = uploader-frame- + seed;var callback = uploader-cb- + seed;var iframe = $(iframe id=+id+ name=+id+ style=display:none;);var url = form.attr(action);form.attr(target, id).append(iframe).attr(action, url + ?iframe= + callback);　最后一行，有两个地方值得注意。首先，它为表单添加 target 属性，指向动态插入的 iframe 窗口，这使得上传结束后，服务器将结果返回 iframe 窗口，所以当前页面就不会跳转了。其次，它在 action 属性指定的上传网址的后面，添加了一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从 iframe 窗口传到上层页面。　服务器（upload.php）返回的信息，应该是如下形式：script type=text/javascriptwindow.top.window[callback](data);/script　然后，在当前网页定义回调函数：window[callback] = function (data){　console.log (received callback:， data);　iframe.remove (); //removing iframe　form.removeAttr (target);　form.attr (action， url);　window[callback] = undefined; //removing callback};　三、ajax 上传　HTML5 提出了 XMLHttpRequest 对象的第二版，从此 ajax 能够上传文件了。这是真正的异步上传，是将来的主流。上一节的 iframe 上传