ria之家--RIA三部曲：jquery、ext、flex » javascript教程 http://www.36ria.com RIA三部曲：jquery、ext、flex Wed, 08 Feb 2012 12:19:26 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 ajax异步文件上传原理解析 http://www.36ria.com/4397 http://www.36ria.com/4397#comments Sun, 07 Aug 2011 07:32:09 +0000 明河 http://www.36ria.com/?p=4397

（PS:由于上传文件会给服务器造成负担，这里明河就不将demo上传，请自行在本地服务器测试demo。）
有一段时间没发文章了，明河手上项目太紧了，终于快临近发布了，偷闲跟大家分享下ajax异步文件上传原理，前段时间一直在捣鼓异步文件上传，也算颇有心得，以前也写过flash文件上传组件，有兴趣的朋友可以看yijs.File，早期作品，代码比较粗糙，最近又写了二个异步文件上传组件，一个是基于iframe，一个是基于flash，都是基于KISSY1.2，日后会放出。言归正传，今天来谈下ajax异步文件上传的原理。
（PS:英文原文可以看《Uploading Files with AJAX》）。

1.在demo中我们要实现的功能

  • 异步上传文件（支持多选上传）
  • 可以即时预览图片

2.通过这篇教程你将学会什么？

  • ajax异步文件上传的核心原理
  • 新的文件API：FileReader对象的用法；
  • FormData对象的用法（这是XMLHttpRequest2的内容）。

很遗憾的是IE对FileReader和FormData并不支持（包括IE9），所以文中的方案有兼容性问题，想要实现全兼容的文件上传（包括图片预览），还需要其他技巧，以后讲解明河完成的异步上传组件时会说明。
（PS：Opera目前不支持FormData对象，请在firefox和chrome下浏览demo。）

3.构建图片上传表单

  1. <form method="post" enctype="multipart/form-data"  action="upload.php">
  2.             <input type="file" name="images" id="images" multiple />
  3.             <button type="submit" id="btn">Upload Files!</button>
  4.         </form>

想要实现异步文件上传的第一个关键步骤，给form增加enctype=”multipart/form-data”属性，这个属性非常关键，缺少这个属性，将直接提交表单。
action属性指向处理文件上传数据的服务器端路径。
多选上传的关键是在上传框上加multiple属性。

4.upload.php

我们先来看服务器端处理文件脚本：

  1. <?php
  2.  
  3. foreach ($_FILES["images"]["error"] as $key => $error) {
  4.     if ($error == UPLOAD_ERR_OK) {
  5.         $name = $_FILES["images"]["name"][$key];
  6.         move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
  7.     }
  8. }
  9. echo "<h2>文件成功上传！</h2>";

这段php脚本做了非常多的简化，比如缺少文件大小限制、文件去重、用户限制等一系列安全处理。
$_FILES这个关联数组存放着文件数据，是处理的关键，有不清楚的朋友可以看php手册，这里不再累述，毕竟不是本文讲解重点。

5.监听上传框的change事件

  1. var input = document.getElementById("images");
  2. input.addEventListener("change", function (evt) {
  3.     var files = this.files;
  4. })

留意这里的this.files，files数组将存储你上传的文件信息，即使只上传1张图片，也是数组形式出现。

6.利用FileReader将图片显示到页面上

关于FileReader，w3c有非常详细的说明，传送门点此。

  1. //遍历文件
  2. for ( ; i < len; i++ ) {
  3.     file = this.files[i];
  4.     //文件类型为图片
  5.     if (!!file.type.match(/image.*/)) {
  6.         //浏览器支持FileReader对象
  7.         if ( window.FileReader ) {
  8.             reader = new FileReader();
  9.             //监听文件读取结束后事件
  10.             reader.onloadend = function (e) {
  11.                 //将图片添加到显示列表
  12.                 showUploadedItem(e.target.result, file.fileName);
  13.             };
  14.             //读取文件
  15.             reader.readAsDataURL(file);
  16.         }
  17.         //将文件数据添加到FormData对象内
  18.         if (formdata) {
  19.             formdata.append("images[]", file);
  20.         }
  21.     }   
  22. }

首先需要判断下文件类型，file.type.match(/image.*/)，如果是图片，file.type值会类似“image/jpeg”的形式。
接下来实例化FileReader读取文件。

  1. reader = new FileReader();
  2.             //监听文件读取结束后事件
  3.             reader.onloadend = function (e) {
  4.                 //将图片添加到显示列表
  5.                 showUploadedItem(e.target.result, file.fileName);
  6.             };
  7.             //读取文件
  8.             reader.readAsDataURL(file);

FileReader有6个事件( onloadstart、onprogress、onload、onabort、 onerror、onloadend)，onloadend监听读取完毕事件，我们需要读取结束后把图片打印到页面。
留意e.target.result，result包含图片数据
最后来看下showUploadedItem函数：

  1. //显示上传图片
  2.     function showUploadedItem (source) {
  3.           var list = document.getElementById("image-list"),
  4.               li   = document.createElement("li"),
  5.               img  = document.createElement("img");
  6.           img.src = source;
  7.           li.appendChild(img);
  8.         list.appendChild(li);
  9.     }

非常简单，将img元素添加到li元素，然后li添加到ul即可。

7.ajax发送FormData数据

  1. //遍历文件
  2.         for ( ; i < len; i++ ) {
  3.             file = this.files[i];
  4.                 //将文件数据添加到FormData对象内
  5.             if (formdata) {
  6.             formdata.append("images[]", file);
  7.             }
  8.         }

将文件信息添加到formdata。

  1. //发送ajax请求，存储文件（传递FormData对象过去）
  2. if (formdata) {
  3.     $.ajax({
  4.         url: "upload.php",
  5.         type: "POST",
  6.         data: formdata,
  7.         processData: false,
  8.         contentType: false,
  9.         success: function (res) {
  10.             //将上传成功后的提示打印到页面
  11.             document.getElementById("response").innerHTML = res;
  12.         }
  13.     });
  14. }

发送异步请求将数据传给upload.php处理。这里使用jquery的ajax方法。

]]> http://www.36ria.com/4397/feed 10 提升用户体验之道：图片预加载 http://www.36ria.com/4030 http://www.36ria.com/4030#comments Fri, 08 Apr 2011 15:06:23 +0000 天河 http://www.36ria.com/?p=4030 随着网站构建越来越倾向于实现“桌面般的体验”，网站中的图片数量也开始显著地增长。想想网站中的对话框、Tabs、Tooltips、Sliders以及日历控件吧，这都是实现“桌面般体验”的必要元素。

预加载这一堆图片对网站性能及可用性的提升是有好处的，这样避免了图片加载过程中页面的闪烁、破裂（视觉上）等问题。

常用的技术

有两种常用的图片预加载技术：

CSS sprites

CSS sprites技术可以用来减少页面产生的HTTP请求数。它是这么实现的，把所有的图型状态（比如按钮的默认状态，悬停及激活等状态）保存到一张图片中。并依据元素的状态，使用CSS对图片进行相应的定位、切割。

不过这样有个重要的缺点——需要提前加载的图片不适用这项技术。一些后面才需要显示的图片并没有被加载，这可能会导致一个延迟。因此，此技术一般适合静态站点，主要用来减少图片加载数。

JavaScript

另一个可以使用的技术是使用JavaScript的image对象。这个方法是这样的，先把网站中使用的每个图片的地址（URL）放到一个数组中。

  1. var myImages = ["image_1.jpg', 'image_2.jpg', 'image_3.jpg', ...];

然后遍历这个数组，根据图片地址创建各自的image对象。这样可以保证所有的图片都能被浏览器缓存，等用到的时候就无需等待了。

  1. for (var i = 0; i <= myImages.length; i++) {
  2.      var img = new Image();
  3.      img.src = myImages[i];
  4. }

此方案费时的地方是，不仅要制造一个包含每张图片地址的数组，还要维护它的一致性。网站的每个需求变更（添加或更改图片地址）都会影响到这个数组。试想频繁变更的应用，又拥有数百张图片，这真会让人筋疲力尽的。

图片自动预加载（带进度指示器）

一个更好的方式是自动收集图片的地址。

首先要分析页面中（包括外链及内联）的样式表。这可以通过遍历“document.styleSheets”对象来获得页面使用的所有样式表。

  1. for (var i = 0; i < document.styleSheets.length; i++){

接下来要找出样式表的根目录。用来得到各个图片的绝对地址。

  1. var baseURL = getBaseURL(document.styleSheets[i].href);

考虑到浏览器的兼容性，必须同时检查每个样式表的“cssRules”或“rules”中是否包含CSS规则。

  1. if (document.styleSheets[i].cssRules) {
  2.     cssRules = document.styleSheets[i].cssRules
  3. }
  4. else if (document.styleSheets[i].rules) {
  5.     cssRules = document.styleSheets[i].rules
  6. }

所有非空的CSS规则都要被解析，来确认它是否关联了图片。一个简单的正则表达式就可以解析出图片地址。

  1. var cssRule = cssRules[j].style.cssText.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);

然后，把这里收集到的所有图片地址保存到一个数组中供后面使用。

  1. function analyzeCSSFiles() {
  2.     var cssRules; // CSS rules
  3.    
  4.     for (var i = 0; i < document.styleSheets.length; i++) { // loop through all linked/inline stylesheets
  5.       
  6.         var baseURL = getBaseURL(document.styleSheets[i].href); // get stylesheet's base URL
  7.  
  8.         // get CSS rules
  9.         if (document.styleSheets[i].cssRules) {
  10.             cssRules = document.styleSheets[i].cssRules
  11.         }
  12.         else if (document.styleSheets[i].rules) {
  13.             cssRules = document.styleSheets[i].rules
  14.         }
  15.        
  16.         // loop through all CSS rules
  17.         for (var j = 0; j < cssRules.length; j++) {
  18.             if (cssRules[j].style && cssRules[j].style.cssText) {
  19.                 // extract only image related CSS rules
  20.                 // parse rules string and extract image URL
  21.                 var cssRule = cssRules[j].style.cssText.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);
  22.                 if (cssRule) {
  23.                     // add image URL to array
  24.                     cssRule = (cssRule + "").replace("\"", "")
  25.                     imageURLs.push(baseURL + cssRule);
  26.                 }
  27.             }
  28.         }
  29.     }
  30. }

数组中存放的图片地址是绝对路径，为了得到它，我们实现了“getBaseUrl”函数来解析每个CSS文件的绝对地址。

  1. function getBaseURL(cssLink) {
  2.     cssLink = (cssLink) ? cssLink : 'window.location.href'; // window.location.href for inline style definitions
  3.    
  4.     var urlParts = cssLink.split('/'); // split link at '/' into an array
  5.     urlParts.pop(); // remove file path from URL array
  6.    
  7.     var baseURL = urlParts.join('/'); // create base URL (rejoin URL parts)
  8.    
  9.     if (baseURL != "") 
  10.     {
  11.         baseURL += '/'; // expand URL with a '/'
  12.     }
  13.    
  14.     return baseURL;
  15. }

现在，遍历这个列表，为网站的每个图片创建一个JavaScript图片对象，来实现图片预加载并强制浏览器进行缓存。请注意“setTimeout”的使用，它确保了每个图片加载是依序执行的，当前图片加载完成才会加载下一个。原因是某些浏览器无法同时处理超过2个请求（译者注：IE6单域下的并发连接数限制就是2个）。为了避免可能的死锁，这里使用jQuery的bind方法给“load”、“onreadystatechange”和“error”事件绑定了一个处理器。这样可以确保遇到无法加载的遗失图片时，“errorTimer”可以把你带回正确的轨道。

  1. function preloadImages() {
  2.     if (imageURLs && imageURLs.length && imageURLs[imagesLoaded]) { // if image URLs array isn't empty
  3.         var img = new Image(); // create a new imgage object
  4.         img.src = imageURLs[imagesLoaded]; // set the image source to the extracted image URL
  5.        
  6.         setTimeout(function () {
  7.             if (!img.complete) {
  8.                 jQuery(img).bind('onreadystatechange load error', onImageLoaded); // bind event handler
  9.             } else {
  10.                 onImageLoaded(); // image loaded successfully, continue with the next one
  11.             }
  12.                        
  13.             errorTimer = setTimeout(onImageLoaded, 1000); // handle missing files (load the next image after 1 second)
  14.         }, 25);
  15.     }
  16.     else {
  17.         showPreloadedImages();
  18.     }
  19. }
  20.  
  21. function onImageLoaded() {
  22.     clearTimeout(errorTimer); // clear error timer
  23.    
  24.     imagesLoaded++; // increase image counter
  25.    
  26.     preloadImages(); // preload next image
  27. }

为了提升预加载时的用户体验，这里对“onImageLoaded”事件处理器做点改动，来添加一个进度条。

首先，引入jQuery UI的样式和显示进度条所需要的JavaScript文件。

  1. <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
  2. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>

然后在DOMReady事件被触发时初始化进度条。

  1. $(document).ready(function () {
  2.     $("#progressbar").progressbar({ value: 0 }); // initialize progress bar
  3. });

最后要做的一件事是扩展“onImageLoaded”事件处理函数。每加载完一张图片，就计算一次进度并更新进度条。

为了验证预加载的效果，这里把所有图片都添加到页面中。在预加载全部完成时，所有的图片会同时显示。

  1. function onImageLoaded() {
  2.     clearTimeout(errorTimer); // clear error timer
  3.  
  4.     $("#imagelist").append("<span>" + imagesLoaded + ": </span><img src='" + imageURLs[imagesLoaded] + "'/>"); // append image tag to image list
  5.  
  6.     imagesLoaded++; // increase image counter
  7.  
  8.     var percent = parseInt(100 * imagesLoaded / (imageURLs.length - 1)); // calculate progress
  9.  
  10.     $("#progressbar").progressbar({ value: percent }); // refresh progress bar
  11.     $("#progressbarTitle").text("Preloading progress: " + percent + "%");
  12.  
  13.     preloadImages(); // preload next image
  14. }

优秀只需一小步

预加载图片是一个提升用户体验，以及让自己的网站看起来更专业的一个途径。通过自动分析CSS规则来进行图片的批量预加载也避免了大量的体力活。

进度条可以让用户知道加载的进展，避免用户的冷落感。另外，jQuery提供了大批优秀组件，进度条就是其中一个，只需简单的配置就可以满足我们的需求。使用它们无疑能显著提升你的网站形象。

希望这篇文章能给你带来灵感，去思考你的项目是否也能从这里描述的技术受益。

最后附上zip文件，它包含所有上面的预加载示例文件。下载并解压后，用浏览器打开preloading.html，并单击“Start preloading”就可以观看示例了。

再做些简单修改，你就可以把它集成到你自己的项目里了。

原文：Improving User Experience: Preload Images

附：这是天河在这里发的第一篇文章，翻译的不好，望大家见谅。顺道给大家打个招呼，以后望大家多多关照哈。原文附件在Chrome下有些小问题，待我修正后附上。

]]> http://www.36ria.com/4030/feed 19 《javascript设计模式》学习笔记二：闭包 http://www.36ria.com/5 http://www.36ria.com/5#comments Mon, 20 Apr 2009 14:02:26 +0000 明河共影 http://423825.146.hostcn.cn/?p=5 在javascript中，函数就是对象，而且是一等对象，它拥有其他语言函数的所有特性，同时也拥有其他语言不可比拟的灵活性，在笔记一中无论是哪一种创建对象的方法，它们的构造函数都是函数。

现在来看个javascript独有的特性：闭包。

关于闭包，有一篇非常专业的文章，附上网址：

www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html

里面关于闭包的解释是这样的：

所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

在《javascript设计模式》关于闭包的解释是这样的：

闭包是一个受保护的变量空间，由内嵌的函数构成。定义在函数内部的变量在函数外部不可以被访问。通过将变量包裹在匿名函数中，从而创建类的私有变量。

不管哪种定义，都非常抽象，来看例子：

闭包与匿名函数息息相关，来看个匿名函数的例子：

（匿名函数顾名思义就是没有函数名的函数：function(){…….}，例子里面的函数后面有个()，实际上是立即调用的意思，这个()实际上在用来传递匿名函数参数的容器，再来看个例子）.

(function(foo,bar){
alert(foo*bar);
})(5,6);

例子中的(5,6)实际上是匿名函数的实参。

再看个与上一个例子类似的写法：

var baz = (function(foo,bar){
return foo*bar;
})(5,6);
alert(baz);

这个例子将匿名函数赋予一个变量。

匿名函数的关键用途：创建闭包！再看个例子：

  1. var baz;
  2. (function(){
  3.     var foo = 10;
  4. var bar = 2;
  5. baz = function(){
  6.       return foo * bar;
  7. };
  8.  
  9. })();
  10. alert(baz());

代码解释：

运行以上函数后，弹出对话框显示的是20，这是闭包的有意思的地方，本来定义在函数内部的变量是无法访问的，比如foo 和bar，但是在函数里面将一个匿名函数赋予一个全局变量时，此匿名函数可以使用局部变量。比如： baz是全局变量，但是它与foo、bar一样存在于匿名函数中，它的值是function(){return foo * bar;};这个匿名函数返回来的foo * bar的值，当我们在函数外使用alert（）就可以访问到闭包中的变量。

之所以强调闭包，在于javascript并没有命名空间与私有共有的定义，但利用闭包可以实现类似的功能，这在保护变量的时候很有用。

]]> http://www.36ria.com/5/feed 0 学习笔记一：创建javascript对象的三种方式 http://www.36ria.com/3 http://www.36ria.com/3#comments Mon, 20 Apr 2009 13:38:39 +0000 明河共影 http://423825.146.hostcn.cn/?p=3 前几天刚入手《javascript设计模式》这本书，猛读了一下，颇有感悟，对javascript面向对象的写法有了进一步的了解，也解答了以前困惑良久的问题，萌发了写笔记的想法，想把这本书的精华分享给想要了解javascript设计模式的朋友们。

一、三种创建对象的方式

书上有个例子：启动和停止一个动画，一般面向过程的写法如下：

  1. function startAnimation(){
  2.  
  3. }
  4.  
  5.  
  6. function stopAnimation(){
  7.  
  8. }

现在把它改写成一个对象

第一种方式：

  1. var Anim = function(){
  2.  
  3. };
  4.  
  5. Anim.prototype.start = function(){
  6.  
  7. };
  8.  
  9. Anim.prototype.stop = function(){
  10.  
  11. };
  12.  
  13. //实例化对象
  14.  
  15. var myAnim = new Anim();
  16.  
  17. myAnim.start();
  18.  
  19. myAnim.stop();

第二种方式：（偶使用的就是这种方式）

  1. var Anim = function(){
  2.  
  3. };
  4.  
  5. Anim.prototype = {
  6.  
  7.     start : function(){
  8.  
  9.     },
  10.  
  11.     stop : function(){
  12.  
  13.     }
  14.  
  15. };

第三种方式：

  1. Function.prototype.method = function(name,fn){
  2.  
  3.         this.prototype[name] = fn;
  4.  
  5. }
  6.  
  7. var Anim = function(){
  8.  
  9. };
  10.  
  11. Anim.method('start',function(){
  12.  
  13. });
  14.  
  15. Anim.method('stop',function(){
  16.  
  17. });

关于prototype原型的解释，我最早接触的是《javascript高级程序设计》里面的说法，但个人觉得还是太简单了，不是很好理解，百度百科里面找到了关于原型的说明，附上网址：

baike.baidu.com/view/1217697.htm

现在来看看三种方式的优缺点：

第一种方式：将二个方法赋予该类的prototype属性（之所以将类的方法放在prototype属性，是为了避免重复创建函数，要使用prototype属性，必须实例化类）,但写法上有点繁琐，而且不是很符合一般类的书写习惯，于是就有了第二种方式的改进版。

第二种方式：强烈推荐这种方式，代码简练，清晰，如果有使用过JQ的话，应该会注意到JQ插件的写法就是这种方式。

第三种方式：我还没有使用过，不敢妄下定论，有兴趣的朋友可以用用看看。（这种方式的优势在于链式调用）。

]]> http://www.36ria.com/3/feed 0