nginx 的 upload_progress 模块不起作用

发布于 2024-11-05 08:38:58 字数 3171 浏览 1 评论 0原文

我的服务器安装了 upload_progress 模块和 nginx。但我无法让它们正常工作。前端实现上的html+javascript完全取自官方网站，即不能有任何错误。描述加载的过程：我打开一个页面，看到进度条为空，选择一个文件，按“提交”，然后翻转到一个页面，文字为：{“name”：“”，“size”：0， "type": null, "error" : null}，虽然我想看到填充进度条。我做错了什么？

---nginx.conf

user www-data;
worker_processes 1;
error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

events {
worker_connections 1024;
}


http {
include mime.types;
default_type application/octet-stream;
client_max_body_size 1024m;
access_log logs/access.log;

sendfile on;

keepalive_timeout 65;

gzip on;
gzip_proxied any;
gzip_min_length 1100;
gzip_http_version 1.0;
gzip_comp_level 9;
gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

server {
listen 80;
server_name localhost;
access_log logs/host.access.log;

location / {
root /var/www/;
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_connect_timeout 60;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_redirect default;
index index.html index.htm;
}

location ~* \.(jpg|jpeg|gif|png|css|js|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|tar|wav|bmp|rtf|swf|ico|flv|txt|xml|docx|xlsx) 
{
root /var/www/socnetwork;
index index.html index.php;
access_log off;
expires 30d;
}
}

---frontend.html

<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="./include/jquery/jquery-1.5.1.js"></script>
        <script src="./include/jquery/jquery.uploadProgress.js"></script>

        <script type="text/javascript">
            $(function() {
                $('form').uploadProgress({

                    jqueryPath: "./include/jquery/jquery-1.5.1.js",
                    uploadProgressPath: "./include/jquery/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="index.html" 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>

原文

I have the server with installed upload_progress module and nginx. But I can not get them to work properly. Realization of frontend on the html + javascript has been completely taken from the official site, ie there can be no mistakes. Describing the process of loading: I open a page, see the progress bar is empty, select a file, press "submit", then flips to a page with the text: {"name ":""," size": 0, "type": null, "error" : null}, although I want to see the filling progress bar.
What am I doing wrong?

---nginx.conf

user www-data;
worker_processes 1;
error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

events {
worker_connections 1024;
}


http {
include mime.types;
default_type application/octet-stream;
client_max_body_size 1024m;
access_log logs/access.log;

sendfile on;

keepalive_timeout 65;

gzip on;
gzip_proxied any;
gzip_min_length 1100;
gzip_http_version 1.0;
gzip_comp_level 9;
gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

server {
listen 80;
server_name localhost;
access_log logs/host.access.log;

location / {
root /var/www/;
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_connect_timeout 60;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_redirect default;
index index.html index.htm;
}

location ~* \.(jpg|jpeg|gif|png|css|js|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|tar|wav|bmp|rtf|swf|ico|flv|txt|xml|docx|xlsx) 
{
root /var/www/socnetwork;
index index.html index.php;
access_log off;
expires 30d;
}
}

---frontend.html

<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="./include/jquery/jquery-1.5.1.js"></script>
        <script src="./include/jquery/jquery.uploadProgress.js"></script>

        <script type="text/javascript">
            $(function() {
                $('form').uploadProgress({

                    jqueryPath: "./include/jquery/jquery-1.5.1.js",
                    uploadProgressPath: "./include/jquery/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="index.html" method="post">
        <input name="file" type="file"/>
        <input type="submit" value="Upload"/>
      </form>


        <div id="uploading">
          <div id="progress" class="bar">
            <div id="progressbar"> </div>
          </div>
        </div>
        <div id="percents"></div>
    </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你不是我要的菜∠ 2024-11-12 08:38:58

您需要在 nginx.conf 中设置 upload_progress 模块。请参阅此处的示例。我在这里复制了关键元素：

 http {
    # reserve 1MB under the name 'proxied' to track uploads
    upload_progress proxied 1m;

    server {
        ....

        location / {
            ...
            # track uploads in the 'proxied' zone
            # remember connections for 30s after they finished
            track_uploads proxied 30s;
        }

        location ^~ /progress {
            # report uploads tracked in the 'proxied' zone
            report_uploads proxied;
        }
    } }

您可以对“/progress”执行 GET 请求以获取信息。

对此位置的 HTTP 请求必须具有 X-Progress-ID 参数
或包含正在进行的有效唯一标识符的 HTTP 标头
上传。

研究 http://wiki.nginx.org/HttpUploadProgressModul 了解更多信息。

You need to setup upload_progress module in nginx.conf. See an example here. I copied the key elements here:

 http {
    # reserve 1MB under the name 'proxied' to track uploads
    upload_progress proxied 1m;

    server {
        ....

        location / {
            ...
            # track uploads in the 'proxied' zone
            # remember connections for 30s after they finished
            track_uploads proxied 30s;
        }

        location ^~ /progress {
            # report uploads tracked in the 'proxied' zone
            report_uploads proxied;
        }
    } }

You can do a GET request to "/progress" to get info back.

The HTTP request to this location must have a X-Progress-ID parameter
or HTTP header containing a valid unique identifier of an inprogress
upload.

Research http://wiki.nginx.org/HttpUploadProgressModul for more info.

回复收藏 0 原文

失眠症患者 2024-11-12 08:38:58

我遇到了同样的问题，在服务器端创建了上传进度的文件，但地址错误...据我所知，这已在较新的版本中修复（我可以自己编译它，这是几个月前的事，sry）

回复收藏 0 原文

宁愿没拥抱 2024-11-12 08:38:58

你没有通过进度条位置来确定文本位置

location = /upload/status {
    report_uploads upload;
}

location / {  
 ...
    track_uploads upload 30s;
 }
location ( with you backend ) {    
    track_uploads upload 1m;   
}

you not detemphasized textermine location with progress bar lacation

location = /upload/status {
    report_uploads upload;
}

location / {  
 ...
    track_uploads upload 30s;
 }
location ( with you backend ) {    
    track_uploads upload 1m;   
}

回复收藏 0 原文

~没有更多了~