nginx 上传进度条

费劲周折，一晚上终于搞定了，nginx版本1.38
－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－
测试php是否好使
cat index.php

<?php  phpinfo(); ?> 

nginx上传进度条

4部分
1.php的支持，自带的，就是建立一个fast-cgi跑php，提供一个test.php显示最终结果
2.nginx_upload_module 上传插件
http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gz
3.nginx_upload_progress_module，上传进度条插件
akostrikov-nginx-upload-progress-module-v0.8.2-1-g3d8e105.zip
http://wiki.nginx.org/HttpUploadProgressModule
下载
https://nodeload.github.com/akostrikov/nginx-upload-progress-module/zipball/master
4.https://github.com/drogus/jquery-upload-progress ,显示进度条的jquery插件

参考链接：
http://wiki.nginx.org/HttpUploadProgressModule
http://www.grid.net.ru/nginx/upload.en.html

nginx基础的包：
yum install openssl-devel zlib-devel prce-devel

./configure --prefix=/usr/local/nginx --add-module=/usr/local/app/nginx_upload_module-2.2.0 --add-module=/usr/local/app/masterzen-nginx-upload-progress-module-a788dea --with-debug

如果
/usr/local/app/nginx_upload_module-2.2.0/ngx_http_upload_module.c: 在函数‘ngx_http_upload_merge_ranges’中:
/usr/local/app/nginx_upload_module-2.2.0/ngx_http_upload_module.c:1682:22: 错误：变量‘result’被设定但未被使用 [-Werror=unused-but-set-variable]

出现这个错误
就把Makefile文件里的 -Werror去掉
在fedora17中遇到
在redhat6.3中没有




配置文件需要注意
注意，官方的配置文件不对
需要加个这个

location ~ (.*)/x-progress-id:(\w*) {
			rewrite ^(.*)/x-progress-id:(\w*)   $1?X-Progress-ID=$2;
		}

php的支持：
yum install spawn-fcgi
yum install php
yum install php-cgi
test.php

[root@haoning html]# cat test.php 
<?php
print_r($_POST);
?>

启动fast-cgi支持php

groupadd www-data
useradd www-data -g www-data
/usr/bin/spawn-fcgi -a 127.0.0.1 -p 9001 -u www-data -g www-data -f /usr/bin/php-cgi -P /var/run/fastcgi-php.pid

配置文件问：
nginx.conf

[root@fedora17 conf]# cat nginx.conf
worker_processes  1;
events {
    worker_connections  1024;
}
http {
	autoindex on; 
	autoindex_exact_size off; 
	autoindex_localtime on; 
	default_type application/octet-stream; 
	sendfile on; 
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 10;
	gzip on;
	gzip_min_length 1k;
	gzip_buffers 4 8k;
	gzip_http_version 1.1;
	gzip_comp_level 3;
	gzip_types text/css text/xml text/plain application/x-javascript application/xml application/pdf application/rtf application/x-perl application/x-tcl application/msword application/vnd.ms-excel application/vnd.ms-powerpoint application/vnd.wap.xhtml+xml image/x-ms-bmp;
	gzip_vary on;
	output_buffers 4 32k;
	upload_progress_json_output;
	upload_progress proxied 1m;
	server {
		listen       80;
		server_name  192.168.76.138;
		charset utf-8,gb2312;
		client_max_body_size 2000m;
		location /upload {
				upload_pass   @test;
				upload_store /tmp 1;
				upload_store_access user:r;
				upload_set_form_field "${upload_field_name}_name" $upload_file_name;
				upload_set_form_field "${upload_field_name}_content_type" $upload_content_type;
				upload_set_form_field "${upload_field_name}_path" $upload_tmp_path;
				upload_aggregate_form_field "${upload_field_name}_md5" $upload_file_md5;
				upload_aggregate_form_field "${upload_field_name}_size" $upload_file_size;
				upload_pass_form_field "^submit$|^description$";
				track_uploads proxied 30s;
		}   
		location @test {
				rewrite	^(.*)$	/test.php last;
		}   

		location / {
            proxy_set_header Host $http_host;
			root   html;
			index  index.html index.htm index.php;
		}

 		location ~ (.*)/x-progress-id:(\w*) {
            rewrite ^(.*)/x-progress-id:(\w*)   $1?X-Progress-ID=$2;
        }
		location ^~ /progress {
            report_uploads proxied;
        }
		location ~ \.php$ { 
			fastcgi_pass 127.0.0.1:9001;
			fastcgi_index index.php;
			set $path_info "/";
			set $real_script_name $fastcgi_script_name;
			if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") { set $real_script_name $1;
				set $path_info $2;
			} 
		} 
		location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { 
			root html;
			access_log off;
			expires 30d;
		} 
		location ~ .*\.(js|css|ico)?$ { 
			root html;
			access_log off;
			expires 1h;
		} 
		error_page 500 502 503 504 /50x.html;
		location = /50x.html { 
			root html;
		} 
		fastcgi_param SCRIPT_FILENAME $document_root$real_script_name;
		fastcgi_param script_name $real_script_name;
		fastcgi_param path_info $path_info;
		include /usr/local/nginx/conf/fastcgi_params; 
	}

}

简单例子测试是否可以上传

<html>
<head>
<title>Test upload</title>
</head>
<body>
<h2>Select files to upload</h2>
<form enctype="multipart/form-data" action="/upload" method="post">
<input type="file" name="file1"><br>
<input type="file" name="file2"><br>
<input type="file" name="file3"><br>
<input type="file" name="file4"><br>
<input type="file" name="file5"><br>
<input type="file" name="file6"><br>
<input type="submit" name="submit" value="Upload">
<input type="hidden" name="test" value="value">
</form>
</body>
</html>

注意/tmp权限
mkdir /tmp/1 2 3 ...
chmod -R 777 /tmp

然后用jquery的插件的版本：

[root@haoning example]# cat index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>ajaxFileUpload</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="../lib/jquery.js"></script>
		<script src="../jquery.uploadProgress.js"></script>
		<script type="text/javascript">
			$(function() {
				$('form').uploadProgress({
					/* scripts locations for safari */
					jqueryPath: "../lib/jquery.js",
					uploadProgressPath: "../jquery.uploadProgress.js",
					start:function(){},
					uploading: function(upload) {$('#percents').html(upload.percents+'%');},
					interval: 2000
			    });
			});
		</script>
		<style type="text/css">
			.bar {
			  width: 300px;
			}
			
			#progress {
			  background: #eee;
			  border: 1px solid #222;
			  margin-top: 20px;
			}
			#progressbar {
			  width: 0px;
			  height: 24px;
			  background: #333;
			}
		</style>
	</head>
	
	<body>  
	  <form id="upload" enctype="multipart/form-data" action="/upload" method="post"><!--注意这里改了-->
        <input name="file" type="file"/>
        <input type="submit" value="Upload"/>
      </form>
		
	    <div id="uploading">
	      <div id="progress" class="bar">
	        <div id="progressbar">&nbsp;</div>
	      </div>
	    </div>
		<div id="percents"></div>
	</body>
</html>

附件中有下好的安装包，不保函yum的