nginx搭建文件服务器获取上传进度
来源:互联网 发布:中文翻译越南语软件 编辑:程序博客网 时间:2024/05/21 15:03
接上篇blog,主要讲讲获取上传进度的实现。 参考地址:https://github.com/masterzen/nginx-upload-progress-module
按照其中的说明配置nginx,将其中的例子存成test.html文件。放到nginx 的html目录下。 浏览器运行发现进度条不会变。 经过调试,发现nginx中缺少如下配置:
test.html里面缺少<script type="text/javascript" language="javascript"></scpript>
修改后重新测试:
成功获得上传进度。
nginx配置:
#user nobody;worker_processes 4;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; upload_progress proxied 8m; #gzip on; server { listen 36888; server_name localhost;client_max_body_size 200m; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /upload { upload_pass /api/upload; upload_cleanup 400 404 499 500-505; upload_store /tmp/upload_tmp; #upload_store_access user:r; upload_limit_rate 0; upload_set_form_field "file_name" $upload_file_name; upload_set_form_field "content_type" $upload_content_type; upload_set_form_field "tmp_path" $upload_tmp_path; upload_aggregate_form_field "md5" $upload_file_md5; upload_aggregate_form_field "size" $upload_file_size; upload_pass_form_field "^.*$"; track_uploads proxied 30s;}location /api/upload { proxy_pass http://192.168.1.56:8888; }location ~ (.*)/x-progress-id:(\w*) { rewrite ^(.*)/x-progress-id:(\w*) $1?X-Progress-ID=$2; } location ^~ /progress {#此url来获取进度信息 report_uploads proxied;}location /imgs { root /root/tools; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #}}
test.html:
<form id="upload" enctype="multipart/form-data" action="/upload" method="post" onsubmit="openProgressBar(); return true;"> <input type="hidden" name="MAX_FILE_SIZE" value="30000000" /> <input name="userfile" type="file" label="fileupload" /> <input type="submit" value="Send File" /> </form>And a progress bar to visualize the progress: <div> <div id="progress" style="width: 400px; border: 1px solid black"> <div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white"> </div> </div> <div id="tp">(progress)</div> </div>Then we need to generate the Unique Identifier and launch the upload on submitaction. This also will start the ajax progress report mechanism.<script type="text/javascript" language="javascript"> interval = null;function openProgressBar() { /* generate random progress-id */ uuid = ""; for (i = 0; i < 32; i++) { uuid += Math.floor(Math.random() * 16).toString(16); } /* patch the form-action tag to include the progress-id */ document.getElementById("upload").action="/upload?X-Progress-ID=" + uuid; /* call the progress-updater every 1000ms */ interval = window.setInterval( function () { fetch(uuid); }, 1000 );}function fetch(uuid) { req = new XMLHttpRequest(); req.open("GET", "/progress", 1); req.setRequestHeader("X-Progress-ID", uuid); req.onreadystatechange = function () { if (req.readyState == 4) { if (req.status == 200) { /* poor-man JSON parser */ var upload = eval(req.responseText); document.getElementById('tp').innerHTML = upload.state; /* change the width if the inner progress-bar */ if (upload.state == 'done' || upload.state == 'uploading') { bar = document.getElementById('progressbar'); w = 400 * upload.received / upload.size; bar.style.width = w + 'px'; } /* we are done, stop the interval */ if (upload.state == 'done') { window.clearTimeout(interval); } } } } req.send(null);}</script>
0 0
- nginx搭建文件服务器获取上传进度
- nginx搭建文件服务器
- nginx搭建文件服务器
- Nginx--搭建静态文件服务器
- redhat nginx搭建文件服务器
- Nginx搭建静态文件服务器
- 上传文件服务器搭建
- nginx + FastDFS分布式文件服务器搭建
- Nginx + nginx-upload-module 文件服务器搭建
- 获取文件上传进度
- angularjs 上传进度获取
- nginx + FastDFS分布式文件服务器搭建及配置
- Ubuntu 安装Nginx服务 并搭建文件服务器
- 使用nginx搭建简单的文件服务器
- 如何利用nginx或tomcat搭建文件服务器
- 使用nginx搭建简单的文件服务器
- Ubuntu下搭建简单的nginx文件服务器
- PHP 获取文件上传进度
- tomcat:java.lang.OutOfMemoryError: PermGen space
- iOS开发-显示发送时间(几分钟前,几小时前,几天前)
- 使用Lock实现互斥(synchronized的一个替代)
- 字符设备驱动第九课---等待队列
- 那些酷炫的RecyclerView开源库整理
- nginx搭建文件服务器获取上传进度
- Linux系统GCC常用命令和GCC编译过程描述
- mysql中floast和double的类型转换问题
- 本文给出35条写出优雅性能的JAVA程序的建议!
- Pango+Qt 列举windows系统字体
- 程序员日记二号:马踏棋盘
- QT自定义信号槽的编程教程
- Java解析HTML之HTMLParser使用与详解
- linuix系统下shell编程的几个命令