设为首页 收藏本站
查看: 618|回复: 0

[经验分享] nginx 上传进度条

[复制链接]

尚未签到

发表于 2016-12-23 10:11:59 | 显示全部楼层 |阅读模式
费劲周折,一晚上终于搞定了,nginx版本1.38
--------------
DSC0000.png
---------------
测试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

[iyunv@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

[iyunv@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的插件的版本:

[iyunv@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的

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.iyunv.com/thread-318311-1-1.html 上篇帖子: nginx rewrite last 与break 下篇帖子: 一 Nginx(Win32) 配置详解
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表