2020-12-05 19:26:32 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>example</title>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<style>
|
|
|
|
|
#container { margin-right: auto; margin-left: auto; max-width: 480px; }
|
|
|
|
|
#info { background: #e0f0f0; border-radius: .5em; padding: 2em; }
|
|
|
|
|
#wrapper { margin-top: 1em; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="container">
|
|
|
|
|
<div id="info">
|
|
|
|
|
Mongoose always buffers a full HTTP message before invoking
|
|
|
|
|
MG_EV_HTTP_MSG event. Big POST request require of lot
|
2022-02-09 20:24:06 +08:00
|
|
|
of RAM to buffer everything.
|
|
|
|
|
<br><br>
|
|
|
|
|
In order to upload large files to a memory-constrained system, use
|
|
|
|
|
<code>MG_EV_HTTP_CHUNK</code> on a server side. It fires when
|
|
|
|
|
a partial HTTP message has been received (or a chunk-encoded chunk).
|
|
|
|
|
Use <code>mg_http_delete_chunk()</code> to release chunk memory.
|
|
|
|
|
When 0-sized chunk is received, that's the end of the message.
|
2022-06-02 20:50:44 +08:00
|
|
|
Use <code>MG_MAX_RECV_SIZE</code> build constant to limit
|
2022-02-09 20:24:06 +08:00
|
|
|
maximum chunk size on a server side.
|
|
|
|
|
<br><br>
|
|
|
|
|
In this example, JavaScript code uses "fetch()" browser API.
|
|
|
|
|
Uploaded file is not saved, but rather printed by server side.
|
2020-12-05 19:26:32 +08:00
|
|
|
</div>
|
|
|
|
|
<div id="wrapper">
|
|
|
|
|
<input type="file" id="el1" style="display: none"/>
|
|
|
|
|
<button id="el2">choose file...</button>
|
2023-01-28 06:16:24 +08:00
|
|
|
<span>Selected file:</span> <span id="el4"></span> <br/>
|
|
|
|
|
<button id="el5" style="margin: 0.5em 0;" disabled>upload file</button>
|
2022-02-09 20:24:06 +08:00
|
|
|
<div id="el3" style="margin-top: 1em;"></div>
|
2020-12-05 19:26:32 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
2022-02-09 20:24:06 +08:00
|
|
|
<script>
|
2023-01-28 06:16:24 +08:00
|
|
|
var f; // selected file
|
2022-02-09 20:24:06 +08:00
|
|
|
|
|
|
|
|
// When user clicks on a button, trigger file selection dialog
|
|
|
|
|
document.getElementById('el2').onclick = function(ev) {
|
|
|
|
|
document.getElementById('el1').click();
|
|
|
|
|
};
|
|
|
|
|
|
2023-01-28 06:16:24 +08:00
|
|
|
document.getElementById('el5').onclick = function(ev) {
|
|
|
|
|
var r = new FileReader();
|
2022-02-09 20:24:06 +08:00
|
|
|
r.readAsArrayBuffer(f);
|
|
|
|
|
r.onload = function() {
|
|
|
|
|
ev.target.value = '';
|
|
|
|
|
document.getElementById('el3').innerText = 'Uploading...';
|
|
|
|
|
fetch('/upload?name=' + encodeURIComponent(f.name), {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: r.result,
|
|
|
|
|
}).then(function(res) {
|
|
|
|
|
document.getElementById('el3').innerText = 'Uploaded ' + r.result.byteLength + ' bytes';
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
2023-01-28 06:16:24 +08:00
|
|
|
// If user selected a file, read it into memory and trigger sendFileData()
|
|
|
|
|
document.getElementById('el1').onchange = function(ev) {
|
|
|
|
|
f = ev.target.files[0];
|
|
|
|
|
if (!f) return;
|
|
|
|
|
document.getElementById('el4').innerText = f.name;
|
|
|
|
|
document.getElementById('el5').removeAttribute('disabled');
|
|
|
|
|
};
|
|
|
|
|
|
2022-02-09 20:24:06 +08:00
|
|
|
</script>
|
2020-12-05 19:26:32 +08:00
|
|
|
</html>
|
