利用nginx实现文件上传和进度条功能

最近做一个产品，需要实现从网页上传文件给服务器。一般情况下都是采用Ajax异步方式，创建一个iframe，在iframe里面把数据以form方式提交给后端的服务器脚本，由服务器脚本（比如PHP）来负责接收上传的数据。这种方式存在性能和效率的问题。所以，决定采用Nginx的上传模块来完成接收数据的功能，接收完数据后，再去转给后端脚本语言进行后续处理（比如：移动文件、插入文件的信息到数据库中）。同时，由于需要在前端展现上传的进度，因此可以利用Nginx一个uploadprogress模块来获取。
     整个处理框图如下：

     实现步骤：
     1、查看Nginx是否安装了这两个模块（nginx_upload_module和nginx_uploadprogress_module），命令nginx -V (注意是大写)，可以查看Nginx当时编译时候的参数，如果发现有上述两个模块，说明Nginx已经安装了这两个模块。如果没有的话，就需要安装这两个Nginx模块。由于这两个模块不在Nginx源代码中，需要重新编译Nginx，在编译选项中加上
    --add-module=/模块源代码路径/nginx_upload_module-2.2.0 --add-module=/模块源代码路径/nginx_uploadprogress_module-0.8.2 。
      2、由于产品的前端使用的是jQuery框架，所以，找了一个现成的jQuery下的上传文件插件（ajaxfileupload）。该代码基本原理就是动态创建一个iframe，在iframe中再增加一个form，最后数据放到这个form中提交给服务器，代码量比较小也就200来行代码。前端的代码如下：

[html]  view plain copy

1. <script type="text/javascript" src="http://192.168.1.203:7100/js/libs/ajaxfileupload.js" ></script>  
2. <script type="text/javascript">  
3.     function uploadfile(){          
4.         $.ajaxFileUpload({  
5.             url:'http://192.168.1.203:7100/upload/‘,//上传的地址  
6.             sercureuri:false,  
7.             fileElementId:'fileToUpload',  
8.             dataType:'json',  
9.             success:function(data,status){  
10.                 if(typeof(data.error) != 'undefined'){  
11.                     if(data.error != '')  
12.                         alert(data.error);  
13.                 }  
14.                 else{  
15.                     alert(data.msg);  
16.                 }  
17.             },  
18.             error:function(data,status, e){  
19.                 alert(e);  
20.             }  
21.         });  
22.         return false;  
23.     }     
24. </script