Last active
December 26, 2024 23:26
-
-
Save an3park/78f5c69e44298c3390b0a5e21bc707db to your computer and use it in GitHub Desktop.
File upload by chunk (JS + PHP)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>upload</title> | |
| </head> | |
| <body> | |
| <input type="file" id="f"> | |
| <input type="button" value="btn" id="btn"> | |
| <div id="t"></div> | |
| <script> | |
| const f = document.getElementById('f'); | |
| const btn = document.getElementById('btn'); | |
| const text = document.getElementById('t'); | |
| btn.onclick = () => fileUpload(f.files[0]); | |
| function fileUpload(file) { | |
| const slice = (file, start, end) => { | |
| return file.mozSlice ? file.mozSlice(start, end) : | |
| file.webkitSlice ? file.webkitSlice(start, end) : | |
| file.slice(start, end); | |
| } | |
| const step = 1048576*50; | |
| const filename = file.name; | |
| const size = file.size; | |
| try { | |
| let sendslice = (start, id = 0) => { | |
| let end = (start+step < size) ? start+step : size; | |
| let formData = new FormData(); | |
| formData.append('id', id); | |
| formData.append('file', slice(file, start, end) , filename); | |
| let xhr = new XMLHttpRequest(); | |
| xhr.upload.onprogress = e => { | |
| text.innerHTML = ((start+e.loaded)/size); | |
| } | |
| xhr.onload = e => { | |
| if (xhr.responseText.length != 13) throw new Error(xhr.statusText); | |
| let id = xhr.responseText; | |
| // console.log(`${filename} (${~~(start/1048576)}-${end/1048576}) ${id}`); | |
| if (end != size) sendslice(end, id); | |
| } | |
| xhr.open('POST', 'upload.php'); | |
| xhr.send(formData); | |
| } | |
| sendslice(0); | |
| } catch(err) { | |
| console.log(err); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| header('Content-type: text/plain'); | |
| // $fileName = $_FILES["file"]["name"]; // The file name | |
| $fileTmpLoc = $_FILES["file"]["tmp_name"]; // File in the PHP tmp folder | |
| $fileSize = $_FILES["file"]["size"]; // File size in bytes | |
| const uploads = 'uploads'; | |
| const maxsize = 1048576*200; | |
| if (!is_dir(uploads)) mkdir(uploads); | |
| // echo json_encode($_FILES)."\n"; | |
| if (!$fileTmpLoc) { // if file not chosen | |
| http_response_code(400); | |
| echo "No file to upload"; | |
| die; | |
| } | |
| if ($fileSize > 200000000) { // 200 MB | |
| http_response_code(413); | |
| echo "File is too large"; | |
| die; | |
| } | |
| if (strlen($_POST['id']) != 13) { | |
| header('mark: 0'); | |
| if (mime_content_type($fileTmpLoc) != 'application/zip') { | |
| http_response_code(415); | |
| die; | |
| }; | |
| $id = uniqid(''); | |
| $fileloc = uploads.'/'. $id; | |
| move_uploaded_file($fileTmpLoc, $fileloc); | |
| } else { | |
| header('mark: 1'); | |
| $id = $_POST['id']; | |
| $fileloc = uploads.'/'. $id; | |
| if (!file_exists( $fileloc )) { | |
| http_response_code(400); | |
| die; | |
| } | |
| if (filesize($fileloc) + filesize($fileTmpLoc) > maxsize) { | |
| unlink($fileloc); | |
| http_response_code(413); | |
| die; | |
| } | |
| file_put_contents( $fileloc, file_get_contents($fileTmpLoc), FILE_APPEND); | |
| } | |
| echo $id; | |
| ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment