I am following the official tutorial, http://wiki.nginx.org/HttpUploadProgressModule
1) Insert these into proper position in your Nginx.conf
upload_progress proxied 1m; #place under http{ ...}
track_uploads proxied 30s; #In my example, my upload button on the html template points to /upload (i.e. location /upload {...} , so I insert it in location /upload {...}
location ^~ /progress {
# report uploads tracked in the 'proxied' zone
report_uploads proxied;
} #Put this as a new location block
#For see the effect of upload progress bar, I suggest u temporarily limit the upload rate by add upload_limit_rate 20000 in location /upload {...}
2) In your html template, just copy form the official doc
<form id="upload" enctype="multipart/form-data" action="/upload.php" 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>
-- Change ...action="/upload.php"... to your destination
<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>
-- Just copy it
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.php?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);
}
-- Copy the above too and you are done.
No comments:
Post a Comment