nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示，如何传递GET参数等。

ownload:
http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gz
configure and make :

  1. ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module   --add-module=/data/software/lnmp1.1-full/nginx_http_push_module-0.73 --add-module=/data/software/lnmp1.1-full/ngx_cache_purge-2.1 --add-module=/data/software/lnmp1.1-full/nginx_upload_module-2.2.0  

Nginx配置文件：

较靠谱的文章：http://blog.sina.com.cn/s/blog_704836f401014bpj.html
<?php
$temppath = $_POST["file1_path"];
$name = $_POST["file1_name"];
$md5 = $_POST["file1_md5"];
$f_dir = substr($md5,0,1);
$s_dir = substr($md5,-1);
$final_file_path = "/".$f_dir."/".$s_dir."/".$name;

echo $temppath."<br />";
echo $name."<br />";
echo $md5."<br />";
echo $f_dir."<br />";
echo $s_dir."<br />";
echo $final_file_path;
rename($temppath,$final_file_path);
?>

因为nginx upload module已经做完了最费时的mime解析工作，后端的PHP代码只需要简单的移动文件到合适的位置就可以了。因为upload module是使用C语言写的，比起PHP作解析工作的效率高多了，因此极大地提高了文件上传的效率。

二、upload module的配置参数简要说明

下边是一些配置参数的说明:

upload_pass 指明了需要后续处理的php地址
upload_cleanup 如果php出现400 404 499 500-505之类的错误，则删除上传的文件
upload_store 上传文件存放地址
upload_store_access 上传文件的访问权限，user:r是指用户可读
upload_limit_rate 上传限速，如果设置为0则表示不限制
upload_pass_form_field 从表单原样转到后端的参数，可以正则表达式表示
官方的例子是upload_pass_form_field "^submit$|^description$";
意思是把submit，description这两个字段也原样通过upload_pass传递到后端php处理。如果希望把所有的表单字段都传给后端可以用upload_pass_form_field "^.*$";

---------------

背景：追求极致，由服务器脚本（比如PHP）来负责接收上传的数据。这种方式存在性能和效率的问题。所以，决定采用Nginx的上传模块来完成接收数据的功能，接收完数据后，再去转给后端脚本语言进行后续处理（比如：移动文件、插入文件的信息到数据库中）。

RFC 1867：
module for nginx web server for handling file uploads using multipart/form-data encoding (RFC 1867) and resumable uploads according to this protocol.
Description

The module parses request body storing all files being uploaded to a directory specified by upload_store directive. The files are then being stripped from body and altered request is then passed to a location specified by upload_pass directive, thus allowing arbitrary handling of uploaded files. Each of file fields are being replaced by a set of fields specified by upload_set_form_field directive. The content of each uploaded file then could be read from a file specified by $upload_tmp_path variable or the file could be simply moved to ultimate destination. Removal of output files is controlled by directive upload_cleanup. If a request has a method other than POST, the module returns error 405 (Method not allowed). Requests with such methods could be processed in alternative location via error_page directive.

Nginx.conf
======================================================================

view plainprint?

  1. user  www www;  
  2.   
  3. worker_processes 5;  
  4.   
  5. error_log  /data1/logs/nginx_error.log  crit;  
  6.   
  7. pid        /usr/local/webserver/nginx/nginx.pid;  
  8.   
  9. #Specifies the value for maximum file descriptors that can be opened by this process.  
  10. worker_rlimit_nofile 51200;  
  11.   
  12. events  
  13. {  
  14.   use epoll;  
  15.   worker_connections 51200;  
  16. }  
  17.   
  18. http  
  19. {  
  20.   include       mime.types;  
  21.   default_type  application/octet-stream;  
  22.   
  23.   #charset  gb2312;  
  24.   
  25.   server_names_hash_bucket_size 128;  
  26.   client_header_buffer_size 32k;  
  27.   large_client_header_buffers 4 32k;  
  28.   client_max_body_size 8m;  
  29.   
  30.   sendfile on;  
  31.   tcp_nopush     on;  
  32.   
  33.   keepalive_timeout 60;  
  34.   
  35.   tcp_nodelay on;  
  36.   
  37.   fastcgi_connect_timeout 300;  
  38.   fastcgi_send_timeout 300;  
  39.   fastcgi_read_timeout 300;  
  40.   fastcgi_buffer_size 64k;  
  41.   fastcgi_buffers 4 64k;  
  42.   fastcgi_busy_buffers_size 128k;  
  43.   fastcgi_temp_file_write_size 128k;  
  44.   
  45.   gzip on;  
  46.   gzip_min_length  1k;  
  47.   gzip_buffers     4 16k;  
  48.   gzip_http_version 1.0;  
  49.   gzip_comp_level 2;  
  50.   gzip_types       text/plain application/x-javascript text/css application/xml;  
  51.   gzip_vary on;  
  52.   
  53.     server  
  54.     {  
  55.         listen 80;  
  56.         server_name test.local;  
  57.         index index.php index.shtml index.htm index.html;  
  58.         root  /data/app/test.local/wwwroot;  
  59.         access_log  off;  
  60.   
  61.         location /upload {  
  62.             upload_pass     /index.php?c=uploader&a=upload_server;  
  63.             upload_cleanup 400 404 499 500-505;  
  64.             upload_store    /data/app/test.local/upload_tmp;  
  65.             upload_store_access user:r;  
  66.             upload_limit_rate 128k;  
  67.             upload_set_form_field "${upload_field_name}_name" $upload_file_name;  
  68.             upload_set_form_field "${upload_field_name}_content_type" $upload_content_type;  
  69.             upload_set_form_field "${upload_field_name}_path" $upload_tmp_path;  
  70.             upload_aggregate_form_field "${upload_field_name}_md5" $upload_file_md5;  
  71.             upload_aggregate_form_field "${upload_field_name}_size" $upload_file_size;  
  72.             upload_pass_form_field "^.*$";  
  73.         }  
  74.   
  75.         location ~ .*\.php?$  
  76.         {  
  77.             #include fastcgi_params;  
  78.             fastcgi_pass  127.0.0.1:9000;   
  79.             fastcgi_index index.php;        
  80.             include fcgi.conf;              
  81.         }  
  82.   
  83.         location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {  
  84.             expires      30d;  
  85.         }  
  86.   
  87.         location ~ .*\.(js|css)?$ {  
  88.             expires      1d;  
  89.         }  
  90.   
  91.   
  92.     }  
  93. }  

1.上面的#include fastcgi_params; 被我注释掉了，否则出现：405 Method not allowed ,查了下：
Nginx 静态文件中的 POST 请求返还 405 Method not allowed 错误，于是用了9000的PHP端口。
index.php 内容：

view plainprint?

  1. <?php                     
  2. print_r($_POST);          
  3. echo $upload_tmp_path;    
  4. $temppath = $_POST["file1_path"];  
  5. $name = $_POST["file1_name"];  
  6. $md5 = $_POST["file1_md5"];  
  7. $f_dir = substr($md5,0,1);  
  8. $s_dir = substr($md5,-1);  
  9. $final_file_path = "/".$f_dir."/".$s_dir."/".$name;  
  10.   
  11. echo $temppath."<br />";  
  12. echo $name."<br />";  
  13. echo $md5."<br />";  
  14. echo $f_dir."<br />";  
  15. echo $s_dir."<br />";  
  16. echo $final_file_path;  
  17. rename($temppath,$final_file_path);  
  18. ?>                          

上传后返回：
Array
(
    [file1_name] => 6597350142123536341.jpg
    [file1_content_type] => image/jpeg
    [file1_path] => /data/app/test.local/upload_tmp/0000000001
    [file1_md5] => 5a84d879e497bf64acebdc84c4701a76
    [file1_size] => 110001
    [file2] => 
    [file3] => 
    [file4] => 
    [file5] => 
    [file6] => 
    [submit] => Upload
    [test] => value
)
先看一下这个上传目录的结构是这样的，这些编号的都是上传的素材，没有后缀：
/data/app/test.local/upload_tmp# ls
0000000001  0006630963  0006630964

查看目录下有没有这个文件：
ls /data/app/test.local/upload_tmp/0000000001
/data/app/test.local/upload_tmp/0000000001
sz 下来，更名为.jpg的：
sz  /data/app/test.local/upload_tmp/0000000001 ==》0000000001.jpg ，打开一看果然是我上传的文件，得证！

把这个文件放到自己定义的目录下：

view plainprint?

  1. <?php                                   
  2. $temppath = $_POST["file1_path"];       
  3. $name = $_POST["file1_name"];           
  4. $orgFileName = "/data1/files/".$name;   
  5. rename($temppath,$orgFileName);         
  6. ?>                                      

多个文件的一个情况，也就是多个文件的POST数组规律，去进行移动文件即可：
<input type="file" name="file2">
<input type="file" name="file2">
  
[file1_name] => 1332460275090024.jpg
[file1_content_type] => image/jpeg
[file1_path] => /data/app/test.local/upload_tmp/0000000034
[file1_md5] => 4e84aac3bc2cc25b7c69c7b506e4967f
[file1_size] => 73702
[file2_name] => desktop.ini
[file2_content_type] => application/octet-stream
[file2_path] => /data/app/test.local/upload_tmp/0000000035
[file2_md5] => dc723b859dec1526568ad581aec334d5

因为nginx upload module已经做完了最费时的mime解析工作，后端的PHP代码只需要简单的移动文件到合适的位置就可以了。因为upload module是使用C语言写的，比起PHP作解析工作的效率高多了，因此极大地提高了文件上传的效率。

upload_cleanup 如果php出现400 404 499 500-505之类的错误，则删除上传的文件，这块可以利用PHP进行逻辑判断后输出header头来进行操作是否删除文件。
======================================================================
补安装编译方法：
1.下载
wget http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gz
2.编译(在NGINX编译目录执行以下命令, 其中 --add-module=你下载解压的上传插件目录)
./configure --user=www --group=www --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module   --add-module=/root/software/nginx_http_push_module-0.692   --add-module=/root/software/ngx_cache_purge-1.3 --add-module=/root/software/nginx_upload_module-2.2.0

3.上传界面:

参考来源：
1）nginx上传模块—nginx upload module安装：http://waynerqiu.com/7/136.html
2）写得很简洁的安装方法：http://foooy.me/nginx/158.html  【该文里提到的接受PHP，这块没有做详细的配置，参考上面这篇文章即可。】
3）http://anerg.com/read.php?55  
//这一篇文章描述到：upload_pass     /index.php?c=uploader&a=upload_server; 也就是有框架时怎么用框架的action来进行处理。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------
最后，后记备查用相关模块的使用：
听说有一个哥们解决了get的问题，通过相关nginx的指令实现的，没实践：http://waynerqiu.com/7/139.html
还有实现断点续传，进度显示等的：
最近做一个产品，需要实现从网页上传文件给服务器。一般情况下都是采用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来行代码。前端的代码如下：

view plainprint?

  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>  
  25. <div>  
  26. <input type="file" name="addfile" size="50" id="fileToUpload" />  
  27. <input type="button" value="上传" onclick="return uploadfile();"/>  
  28. </div>  

其中，success的回调函数参数是服务器返给浏览器的结果。
3、配置Nginx，实现上传模块来接收页面上传的文件。把下面配置添加到Nginx的配置文件中，注意是加在server的上下文中。
        location = /upload {
                upload_pass     /service.php?path=uploadfile&a=upload_server;//表示Nginx接收完上传的文件后，然后交给后端处理的地址
                upload_cleanup 400 404 499 500-505; //表示当发生这些http status代码的情况下，会把上传的文件删除
                upload_store    /tmp/upload_tmp 1;//上传模块接收到的文件临时存放的路径， 1 表示方式，该方式是需要在/tmp/upload_tmp下创建以0到9为目录名称的目录，上传时候会进行一个散列处理。
                upload_store_access user:r; //指定访问模式
                upload_limit_rate 128k; //设定上传速度上限
                upload_set_form_field "${upload_field_name}_name" $upload_file_name; //设定后续脚本语言访问的变量，其中${upload_field_name}对照本例子就是addfile。比如后台PHP就可以通过$_POST['addfile_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_store设置了临时文件存放根路径，该路径就是经过散裂后上传文件存在真实路径，比如后续处理可以根据这值把上传文件拷贝或者移动到指定的目录下。
                upload_pass_form_field "^.*$";//
                upload_pass_args on;// 打开开关，意思就是把前端脚本请求的参数会传给后端的脚本语言，比如：http://192.168.1.203:7100/upload/?k=23.PHP脚本可以通过$_POST['k']来访问。
        }
4、上述配置完了，就可以实现上传的功能了。但是，要获取上传的进度，那还是需要配置另外一个模块nginx_uploadprogress_module。其实，获取当前进度原理比较简单，就是通过javascript以异步方式定时给特定地址发送请求，这个模块会以json格式返回上传的进度。配置比较简单。
          1）、首先打开这个模块功能，在Nginx配置文件中http上下文里面，增加upload_progress proxied 5m;其中，proxied表示名称（zone_name官方文档），5m表示每次链接存放跟踪信息的大小。另外，再设置返回格式为json，upload_progress_json_output;
          2）、在上述的location = /upload中增加一个配置项track_uploads proxied 30s; 其中，proxied就是刚才在第一步设置的名字，30s表示每次链接处理完毕后，链接会保持30s。
          3）、设置一个location来处理javascript发送请求。
          location ^~ /progress {

  report_uploads proxied;    #GET此地址得到上传进度
}
           4）、还有一个参数考虑设置upload_progress_header ，这个值缺省是X-Progress-ID。有点类似SessionID，主要用在前台需要在上传文件的时候需要设置这个参数值，比如设置为uuid值。这样javascript每次发送请求要获取上传进度时候，都需要带上这个参数，这样上传进度跟踪模块才知道是返回那个链接的进度。
           经过这三步骤，就把上传进度跟踪模块配置好了。现在就需要对前台脚本就行修改
5、修改第2步的前台脚本

view plainprint?

  1. <script type="text/javascript" src="http://192.168.1.203:7100/js/libs/ajaxfileupload.js" ></script>  
  2. <script type="text/javascript">  
  3.     <strong>var interval = undefined;</strong>  
  4.     function uploadfile(){    
  5.         var uuid = "";  
  6.         for (var i = 0; i < 32; i++) {  
  7.             uuid += Math.floor(Math.random() *16).toString(16);  
  8.         }        
  9.         $.ajaxFileUpload({  
  10.             url:'http://192.168.1.203:7100/upload/<strong>?X-Progress-ID=' + uuid</strong>,//上传的地址  
  11.             sercureuri:false,  
  12.             fileElementId:'fileToUpload',  
  13.             dataType:'json',  
  14.             success:function(data,status){  
  15.                 if(typeof(data.error) != 'undefined'){  
  16.                     if(data.error != '')  
  17.                         alert(data.error);  
  18.                 }  
  19.                 else{  
  20.                     alert(data.msg);  
  21.                 }  
  22.             },  
  23.             error:function(data,status, e){  
  24.                 alert(e);  
  25.             }  
  26.         });  
  27.       <strong>  interval = window.setInterval(  
  28.            function () {  
  29.              getUploadProgress(uuid);  
  30.            },  
  31.            2000  
  32.          );</strong>  
  33.         return false;  
  34.     }     
  35.  <strong>   function getUploadProgress(uuid){  
  36.       etajax.sendRequest('http://192.168.1.203:7100/progress/',"GET","X-Progress-ID=" + uuid,getUploadProgressCallback);  
  37.     }  
  38.     function getUploadProgressCallback(type, json, http){  
  39.         if(type == "load"){  
  40.             var bar = document.getElementById('tp');  
  41.             if(json.state == "uploading"){  
  42.                    
  43.                  var w =  Math.floor(json.received * 100.0 / json.size) ;  
  44.                  bar.innerHTML = w + "%";  
  45.             }  
  46.                 /* we are done, stop the interval */  
  47.              if (json.state == 'done') {  
  48.                 bar.innerHTML = "100%";  
  49.                  window.clearTimeout(interval);  
  50.             }  
  51.         }  
  52.     }     </strong>  
  53. </script>  
  54. <div>  
  55. <input type="file" name="addfile" size="50" id="fileToUpload" />  
  56. <input type="button" value="上传" onclick="return uploadfile();"/>  
  57. </div>  
  58. <strong><div>  
  59.     <div id="tp">0%</div>  
  60. </div></strong>  

上述黑体就是增加的代码，其中，有些函数是调用产品封装好的函数，所以，不要全部照搬。主要是抓住以下几个要点就可以了：
    1、在上传文件时候需要增加一个uuid，对应的参数就是upload_progress_header设置的，缺省是X-Progress-ID。
    2、在请求获取进度的时候，都要带上这个uuid。
    3、设定一个定时期，定时发送异步的GET方式请求，获取进度数据。
    4、返回的json格式是｛"state":"uploading", "size":3232,"received":34｝,其中上传完毕state值为done，如果发生错误会，state就是error，并且会返回status，错误编码。
    
    步骤就介绍在这里了。另外，javascript方式上传文件，在用户上传文件时候，最好能获取上传文件大小，这样可以提前告诉用户是否超出允许上传的大小值。但是，目前javascript方式获取文件大小要兼容所有浏览器还是存在问题。我打算还是写个flash，通过flash方式来获取，比较保险。

来自：http://blog.csdn.net/waden/article/details/7040123

更多参考：http://blog.sina.com.cn/s/blog_704836f401014bpj.html

作者：justwinit@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：http://justwinit.cn/post/6221/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！

时间： 2024-09-12 08:03:33

nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示，如何传递GET参数等。的相关文章

解决nginx上传模块nginx_upload_module传递GET参数

解决nginx上传模块nginx_upload_module传递GET参数的方法总结   最近用户反映我们的系统只能上传50M大小的文件, 希望能够支持上传更大的文件. 很显然PHP无法轻易实现大文件上传, 因为会有各种各样的郁闷问题, 比如服务器超时等, 那么如何解决呢? 我想到了nginx_upload_module!!! 如何安装nginx_upload_module? 请看这里:nginx_upload_module安装使用教程 解决了大文件上传之后又遇到了新问题, 我们希望通过ngin

nginx上传模块nginx_upload_module安装与使用教程

一.nginx_upload_module使用背景 利用nginx上传模块Nginx_upload_module可更有效实现大文件断点续传,还可安装nginx-upload-progress-module扩展显示文件上传进度. 二.nginx_upload_module工作原理 Nginx_upload_module通过nginx服务来接受用户上传的文件,自动解析请求体中存储的所有文件上传到upload_store指定的目录下.这些文件信息从原始请求体中分离并根据nginx.conf中的配置重新

nginx上传模块—nginx upload module

nginx上传模块 一. nginx upload module原理 官方文档: http://www.grid.net.ru/nginx/upload.en.html Nginx upload module通过nginx服务来接受用户上传的文件,自动解析请求体中存储的所有文件上传到upload_store指定的目录下.这些文件信息从原始请求体中分离并根据nginx.conf中的配置重新组装好上传参数,交由upload_pass指定的段处理,从而允许处理任意上传文件.每个上传文件中的file字段

服务器-nginx上传后的文件怎么合并？

问题描述 nginx上传后的文件怎么合并? 按照网上的做法,在下载了1.3.8以后的版本继承upload_module的时候安装了一个补丁文件,导致上传都是分片上传的,怎么合并? 解决方案 用现在最新稳定版本1.6.2试试呢

求助，有人知道QQ邮箱里上传文档在线转成HTML 显示在邮件里的功能怎么实现的吗？

问题描述 求思路,有人知道QQ邮箱里上传文档在线转成HTML显示在邮件里的功能怎么实现的吗?就是文档那个按钮 解决方案

修改nginx上传文件大小限制

  一台服务器,用nginx做代理.突然发现上传超过1M大的客户端文件无法正常上传,于是修改了下nginx的配置. cd /export/servers/nginx/conf/nginx.conf,在这个配置文件里面的server段里面的 location / { root html; index index.html index.htm; client_max_body_size 1000m; } 加上了client_max_body_size 字段,怎么重启都不行.后来在总配置文件里面发现了

DJANGO技巧两则：模拟MKDIR -P及配合NGINX上传大文件不使超时

这都是在开发当哪遇到的问题,网上转转,作个记录: http://blog.chinaunix.net/uid-25525723-id-1596574.html http://bookshadow.com/weblog/2014/10/02/python-mkdir-p/   def mkdir_p(path): try: os.makedirs(path) except OSError as exc: # Python >2.5 (except OSError, exc: for Python

nginx上传目录配置,禁止执行权限

如果不让有执行权限最简单的办法  代码如下 复制代码 location ~ ^/upload/.*.(php|php5)$ { deny all; } 上面的方法满足不了我要求,后来找到一个不错的脚本  代码如下 复制代码 server         {                 listen       80;                 server_name xxxx.com;                 index index.html index.htm index.p

nginx 上传文件错误 413 Request Entity Too Large

于是就用Http抓包工具(HttpDetect)看了下,如下图 返回的状态是413 Request Entity Too Large(nginx/1.2.1),再百度发现,这是nginx设置了允许上传的包的问题,这也就合乎上面的情况,后台没有任何异常信息,因为请求根本就没到达我们的tomcat,nginx发现请求的包大于设置的值,接直接返回413了. 解决的办法是,设置nginx的包大小限制为适当的值,如下图