nginx服務(wù)器實現(xiàn)上傳下載文件的實例代碼
下載
更新配制文件,添加如下字段,這里用alias實現(xiàn)把嵌入式開發(fā)板的根目錄全部映射過去,
location /download { alias /; autoindex on; autoindex_localtime on; autoindex_exact_size off; }
執(zhí)行,
$ ./nginx/sbin/nginx -p ./nginx -s reload
上傳
需要有nginx的源碼,重新編譯nginx,添加上傳模塊,上傳進(jìn)度模塊,
$ ./configure --add-module=$parent_path/nginx-upload-module-2.3.0 --add-module=$parent_path/nginx-upload-progress-module-0.8.4 $ make $ make install
注意上傳進(jìn)度模塊,到0.9版本有一個不兼容的更改,
in version 0.9.0 there is INCOMPATIBLE CHANGE: JSONP is now the default output of the progress probes. If you rely on this module serving the deprecated java output use: upload_progress_java_output in the progress probe location.
添加配置文件,
location /upload { upload_pass /; # upload_cleanup 400 404 499 500-505; upload_store /boot; upload_store_access user:rw; # upload_limit_rate 128k; 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 "^.*$"; }
建立html測試,使用fcgi,
printf("<form method=\"POST\" enctype=\"multipart/form-data\" action=\"uploademmc\"\n"); printf("<p>File Upload:\n"); printf("<input type=\"file\" name=\"file\" value=\"\">\n"); printf("<p>\n"); printf("<input type=\"submit\" name=\"uploademmc\" value=\"uploademmc\">\n"); printf("<p>\n"); printf("</form>\n");
上傳,0000000001即為新上傳的文件,這里必須用腳本在上傳結(jié)束后來執(zhí)行重命名操作,
root@zynqmp:~# ls -l /boot total 53172 -rw------- 1 root root 31428 Jan 26 16:11 0000000001 -rw-r--r-- 1 root root 14283264 Jan 26 12:06 Image -rwxr-xr-x 1 root root 19311212 Jan 1 1970 MWM178_V1_U6_V1.bit -rw-r--r-- 1 root root 1118392 Jan 26 06:47 boot.bin -rw-r--r-- 1 root root 19634147 Jan 26 00:56 rootfs.ext4.gz.uboot -rw-r--r-- 1 root root 29091 Jan 26 06:47 system.dtb
上傳使用post方法,后端接收到的字符串為如下格式,可以看到文件名在file_name
字段中,可利用環(huán)境變量REQUEST_URI
提取出來即可,
------WebKitFormBoundarygKAThjQRpvOwowzR Content-Disposition: form-data; name="file_name" 11.PNG ------WebKitFormBoundarygKAThjQRpvOwowzR Content-Disposition: form-data; name="file_content_type" image/png ------WebKitFormBoundarygKAThjQRpvOwowzR Content-Disposition: form-data; name="file_path" /boot/0023791667 ------WebKitFormBoundarygKAThjQRpvOwowzR Content-Disposition: form-data; name="file_md5" 0276e88e6161ac806d46ee0afb45976e ------WebKitFormBoundarygKAThjQRpvOwowzR Content-Disposition: form-data; name="file_size" 17734 ------WebKitFormBoundarygKAThjQRpvOwowzR Content-Disposition: form-data; name="uploademmc" uploademmc ------WebKitFormBoundarygKAThjQRpvOwowzR-- FCGI_ROLE=RESPONDER SCRIPT_FILENAME=./nginx/html/index.cgi QUERY_STRING= REQUEST_METHOD=POST CONTENT_TYPE=multipart/form-data; boundary=----WebKitFormBoundarygKAThjQRpvOwowzR CONTENT_LENGTH=706 SCRIPT_NAME=/index.cgi REQUEST_URI=/uploademmc
上傳進(jìn)度模塊需要前端js協(xié)助,配置文件,前面提到的0.9版本有一個不兼容的更改,如果需要和老版本兼容,需要在location ^~ /progress
中添加upload_progress_java_output
,
http { ... upload_progress proxied 5m; server { ... location = / { fastcgi_pass 127.0.0.1:8088; fastcgi_index index.cgi; include fastcgi.conf; } location /download { alias /; autoindex on; autoindex_localtime on; autoindex_exact_size off; } location /upload { upload_pass /; # upload_cleanup 400 404 499 500-505; upload_store /boot; upload_store_access user:rw; # upload_limit_rate 128k; client_max_body_size 8g; 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 "^.*$"; track_uploads proxied 30s; } location ^~ /progress { # report uploads tracked in the 'proxied' zone report_uploads proxied; # upload_progress_java_output; } location ~ \.js$ { root html; }
設(shè)置參數(shù)client_max_body_size 8g
,否則上傳時會報錯413 Request Entity Too Large
,編寫html,
printf("<form id=\"upload\" method=\"POST\" enctype=\"multipart/form-data\" action=\"upload\" οnsubmit=\"openProgressBar(); return true;\"\n"); printf("<p>File Upload:\n"); printf("<input type=\"file\" name=\"file\" value=\"\">\n"); printf("<p>\n"); printf("<input type=\"submit\" name=\"upload\" value=\"upload\">\n"); printf("<p>\n"); printf("</form>\n"); printf("<div>\n"); printf("<div id=\"progress\" style=\"width: 400px; border: 1px solid black\">\n"); printf("<div id=\"progressbar\" style=\"width: 1px; background-color: blue; border: 1px solid white\"> </div>\n"); printf("</div>\n"); printf("<div id=\"tp\">(progress)</div>\n"); printf("</div>\n");
添加js文件,
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); }
測試一下,chrome自己也會統(tǒng)計上傳進(jìn)度,標(biāo)題欄開始小圓圈刷新,
總結(jié)
以上就是nginx服務(wù)器實現(xiàn)上傳下載文件的實例代碼的詳細(xì)內(nèi)容,更多關(guān)于nginx上傳下載文件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Nginx通過用戶IP獲取所在國家及地理位置的實現(xiàn)方法
Nginx是一款高性能、輕量級的Web服務(wù)器和反向代理服務(wù)器,今天講解Nginx十分常用的功能之一,通過IP獲取用戶所在的國家,一般廣泛應(yīng)用在各類需要定位的網(wǎng)站上面,來定位用戶首次訪問的國家,通過IP解析庫GeoLite2-Country來實現(xiàn)功能,需要的朋友可以參考下2023-10-10Nginx服務(wù)器進(jìn)程數(shù)設(shè)置和利用多核CPU的方法
這篇文章主要介紹了Nginx服務(wù)器進(jìn)程數(shù)設(shè)置和利用多核CPU的方法,這樣便可以更大限度地提高Nginx運(yùn)行效率,需要的朋友可以參考下2015-08-08Nginx的流式響應(yīng)配置實現(xiàn)小結(jié)
nginx是一款自由的、開源的、高性能的HTTP服務(wù)器和反向代理服務(wù)器,本文主要介紹了Nginx的流式響應(yīng)配置實現(xiàn)小結(jié),具有一定的參考價值,感興趣的可以了解一下2024-04-04