{"id":10008398,"date":"2024-02-23T23:57:41","date_gmt":"2024-02-23T15:57:41","guid":{"rendered":"https:\/\/blog.itmax.cn\/?p=10008398"},"modified":"2024-02-23T23:57:41","modified_gmt":"2024-02-23T15:57:41","slug":"javascriptphp%e5%ae%9e%e7%8e%b0%e8%a7%86%e9%a2%91%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10008398","title":{"rendered":"JavaScript+PHP\u5b9e\u73b0\u89c6\u9891\u6587\u4ef6\u5206\u7247\u4e0a\u4f20"},"content":{"rendered":"

\u6458\u8981<\/h2>\n

\u89c6\u9891\u6587\u4ef6\u5206\u7247\u4e0a\u4f20\uff0c\u6574\u4f53\u601d\u8def\u662f\u5229\u7528JavaScript\u5c06\u6587\u4ef6\u5207\u7247\uff0c\u7136\u540e\u5faa\u73af\u8c03\u7528\u4e0a\u4f20\u63a5\u53e3 upload.php<\/code><\/strong> \u5c06\u5207\u7247\u4e0a\u4f20\u5230\u670d\u52a1\u5668\u3002\u8fd9\u6837\u5c06\u7531\u539f\u6765\u7684\u4e00\u4e2a\u5927\u6587\u4ef6\u4e0a\u4f20\u53d8\u4e3a\u591a\u4e2a\u5c0f\u6587\u4ef6\u540c\u65f6\u4e0a\u4f20\uff0c\u8282\u7701\u4e86\u4e0a\u4f20\u65f6\u95f4\uff0c\u8fd9\u5c31\u662f\u6587\u4ef6\u5206\u7247\u4e0a\u4f20\u7684\u5176\u4e2d\u4e00\u4e2a\u597d\u5904\u3002<\/p>\n

\"image.png\"<\/p>\n

\u4e0a\u4ee3\u7801<\/h2>\n

index.html<\/strong><\/p>\n

\u901a\u8fc7\u524d\u7aef\u5c06\u6587\u4ef6\u5bf9\u8c61\u5207\u5206\u6210\u591a\u4e2a\u5c0f\u5757\uff0c\u7136\u540e\u4f9d\u6b21\u5c06\u8fd9\u4e9b\u5c0f\u5757\u7684\u6587\u4ef6\u5bf9\u8c61\u4e0a\u4f20\u5230\u670d\u52a1\u5668\u3002<\/p>\n

<!DOCTYPE html>\n<html lang="en">\n    <head>\n        <meta charset="UTF-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1.0">\n        <title>\u89c6\u9891\u6587\u4ef6\u5206\u7247\u4e0a\u4f20<\/title>\n        <style>\n            *{\n                padding: 0;\n                margin: 0;\n            }\n            .title {\n                text-align: center;\n                font-size: 25px;\n                margin-top: 50px;\n            }\n            .video_upload {\n                width: 500px;\n                height: 60px;\n                background: #eee;\n                margin: 30px auto 0;\n                border: 2px dashed #ccc;\n                border-radius: 10px;\n                position: relative;\n                cursor: pointer;\n                text-align: center;\n                font-size: 25px;\n                line-height: 60px;\n                color: #666;\n            }\n            #fileInput {\n                width: 100%;\n                height: 100%;\n                position: absolute;\n                left: 0;\n                top: 0;\n                opacity: 0;\n                cursor: pointer;\n            }\n            #uploadButton {\n                width: 130px;\n                height: 40px;\n                border: none;\n                outline: none;\n                border-radius: 10px;\n                font-size: 17px;\n                margin: 10px auto;\n            }\n            #ret {\n                text-align: center;\n                font-size: 16px;\n                margin-top: 20px;\n            }\n            #ret video {\n                width: 450px;\n            }\n        <\/style>\n    <\/head>\n    <body>\n        \n        <p class="title">javaScript+PHP\u5b9e\u73b0\u89c6\u9891\u6587\u4ef6\u5206\u7247\u4e0a\u4f20<\/p>\n        <div class="video_upload">\n            <span class="text"> + <\/span>\n            <input type="file" id="fileInput" accept="video\/*">\n        <\/div>\n        <button id="uploadButton" style="display:none;">\u5f00\u59cb\u4e0a\u4f20<\/button>\n        <p id="ret"><\/p>\n\n        <script>\n        \n            \/\/ \u5b9a\u4e49\u5168\u5c40\u53d8\u91cf\n            let videoFile = null;\n            let chunkSize = 1024 * 1024; \/\/ 1MB \u5206\u7247\u5927\u5c0f\n            \n            \/\/ \u5f53\u6587\u4ef6\u9009\u62e9\u6846\u7684\u503c\u6539\u53d8\u65f6\u89e6\u53d1\u8be5\u51fd\u6570\n            function handleFileSelect(event) {\n                const fileList = event.target.files;\n                if (fileList.length > 0) {\n                    videoFile = fileList[0];\n                    console.log("\u9009\u62e9\u4e86\u6587\u4ef6: ", videoFile.name);\n                    document.querySelector('.video_upload .text').textContent = videoFile.name;\n                    document.querySelector('#uploadButton').style.display = 'block';\n                }\n            }\n            \n            \/\/ \u5206\u7247\u5e76\u4e0a\u4f20\u6587\u4ef6\n            async function uploadFile() {\n                if (!videoFile) {\n                    console.error("\u8bf7\u9009\u62e9\u4e00\u4e2a\u89c6\u9891\u6587\u4ef6");\n                    return;\n                }\n            \n                const fileSize = videoFile.size;\n                let start = 0;\n                let end = Math.min(chunkSize, fileSize);\n                let chunkIndex = 0;\n            \n                \/\/ \u83b7\u53d6\u6587\u4ef6\u540d\n                const fileName = videoFile.name;\n            \n                while (start < fileSize) {\n                    const chunk = videoFile.slice(start, end); \/\/ \u4ece\u6587\u4ef6\u4e2d\u622a\u53d6\u4e00\u4e2a\u5206\u7247\n            \n                    \/\/ \u4f7f\u7528FormData\u6765\u6784\u5efamultipart\/form-data\u683c\u5f0f\u7684\u8bf7\u6c42\u4f53\n                    const formData = new FormData();\n                    formData.append('file', chunk);\n                    formData.append('chunkIndex', chunkIndex);\n                    formData.append('fileName', fileName); \/\/ \u5c06\u6587\u4ef6\u540d\u4f5c\u4e3a formData \u7684\u4e00\u90e8\u5206\n            \n                    try {\n                        const response = await fetch('upload.php', {\n                            method: 'POST',\n                            body: formData\n                        });\n            \n                        if (!response.ok) {\n                            throw new Error('\u4e0a\u4f20\u5931\u8d25');\n                        }\n            \n                        console.log('\u4e0a\u4f20\u5206\u7247 ', chunkIndex, ' \u6210\u529f');\n                    } catch (error) {\n                        console.error('\u4e0a\u4f20\u5206\u7247 ', chunkIndex, ' \u5931\u8d25: ', error.message);\n                        return;\n                    }\n            \n                    start = end;\n                    end = Math.min(start + chunkSize, fileSize);\n                    chunkIndex++;\n                }\n            \n                console.log('\u6587\u4ef6\u4e0a\u4f20\u5b8c\u6210');\n            \n                \/\/ \u4e0a\u4f20\u5b8c\u6210\u540e\u53d1\u9001\u901a\u77e5\u7ed9\u670d\u52a1\u5668\u8fdb\u884c\u5408\u5e76\n                notifyServerForMerge(fileName);\n            }\n            \n            \/\/ \u53d1\u9001\u901a\u77e5\u7ed9\u670d\u52a1\u5668\u8fdb\u884c\u5408\u5e76\n            async function notifyServerForMerge(fileName) {\n                try {\n                    const response = await fetch('merge_chunks.php', {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json'\n                        },\n                        body: JSON.stringify({ fileName: fileName })\n                    });\n            \n                    if (!response.ok) {\n                        throw new Error('\u65e0\u6cd5\u901a\u77e5\u670d\u52a1\u5668\u8fdb\u884c\u5408\u5e76');\n                    }\n                    \n                    const res_data = await response.json();\n            \n                    console.log('\u5df2\u901a\u77e5\u670d\u52a1\u5668\u8fdb\u884c\u5408\u5e76');\n                    document.querySelector('.video_upload .text').textContent = '\u5206\u7247\u5408\u5e76\u5b8c\u6210\uff01';\n                    document.querySelector('#ret').innerHTML = '<video autoplay controls src="'+res_data.filePath+'"><\/video>';\n                    document.querySelector('#uploadButton').style.display = 'none';\n                } catch (error) {\n                    console.error('\u901a\u77e5\u670d\u52a1\u5668\u8fdb\u884c\u5408\u5e76\u65f6\u53d1\u751f\u9519\u8bef: ', error.message);\n                }\n            }\n            \n            \/\/ \u6ce8\u518c\u6587\u4ef6\u9009\u62e9\u6846\u7684change\u4e8b\u4ef6\n            document.getElementById('fileInput').addEventListener('change', handleFileSelect);\n            \n            \/\/ \u6ce8\u518c\u4e0a\u4f20\u6309\u94ae\u7684click\u4e8b\u4ef6\n            document.getElementById('uploadButton').addEventListener('click', uploadFile);\n        <\/script>\n\n    <\/body>\n<\/html><\/code><\/pre>\n
upload.php<\/strong><\/p>\n
\u8fd9\u4e2a\u662f\u7528\u4e8e\u63a5\u6536\u524d\u7aef\u4f20\u8fc7\u6765\u7684\u6bcf\u4e00\u6bb5\u5206\u7247\uff0c\u7136\u540e\u4e0a\u4f20\u5230 uploads<\/code><\/strong> \u6587\u4ef6\u5939\uff0c\u4e0a\u4f20\u4e4b\u540e\u5c31\u662f\u4e00\u6bb5\u4e00\u6bb5\u7684\u5c0f\u5206\u7247\u3002<\/p>\n
<?php\n\n    \/\/ \u8bbe\u7f6e\u5141\u8bb8\u8de8\u57df\u8bbf\u95ee\n    header("Access-Control-Allow-Origin: *");\n    header("Access-Control-Allow-Methods: POST");\n    \n    \/\/ \u68c0\u67e5\u662f\u5426\u63a5\u6536\u5230\u6587\u4ef6\u548c\u5206\u7247\u7d22\u5f15\n    if (isset($_FILES['file']['error']) && isset($_POST['chunkIndex']) && isset($_POST['fileName'])) {\n        \n        $error = $_FILES['file']['error'];\n        $chunkIndex = $_POST['chunkIndex'];\n        $fileName = $_POST['fileName']; \/\/ \u83b7\u53d6\u6587\u4ef6\u540d\n        \n        \/\/ \u68c0\u67e5\u662f\u5426\u6709\u9519\u8bef\n        if ($error !== UPLOAD_ERR_OK) {\n            http_response_code(500);\n            echo json_encode(array(\n                'error' => '\u6587\u4ef6\u4e0a\u4f20\u5931\u8d25'\n            ));\n            exit();\n        }\n        \n        \/\/ \u8bbe\u7f6e\u5b58\u50a8\u76ee\u5f55\u548c\u6587\u4ef6\u540d\n        $uploadDir = '.\/uploads\/';\n        $filePath = $uploadDir . $fileName . '.' . $chunkIndex;\n        \n        \/\/ \u5c06\u5206\u7247\u79fb\u52a8\u5230\u6307\u5b9a\u7684\u76ee\u5f55\n        if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {\n            \n            echo json_encode(array(\n                'success' => '\u5206\u7247\u4e0a\u4f20\u6210\u529f'\n            ));\n        } else {\n            \n            http_response_code(500);\n            echo json_encode(array(\n                'error' => '\u5206\u7247\u4e0a\u4f20\u5931\u8d25'\n            ));\n        }\n    } else {\n        \n        http_response_code(400);\n        echo json_encode(array(\n            'error' => '\u7f3a\u5c11\u6587\u4ef6\u3001\u5206\u7247\u7d22\u5f15\u6216\u6587\u4ef6\u540d'\n        ));\n    }\n    \n?><\/code><\/pre>\n
merge_chunks.php<\/strong><\/p>\n
\u8fd9\u4e2a\u662f\u7528\u6765\u5408\u5e76\u5206\u7247\u7684\uff0c\u5f53\u524d\u7aef\u5b8c\u6210\u4e0a\u4f20\u5206\u7247\u7684\u64cd\u4f5c\uff0c\u524d\u7aef\u4f1a\u5f02\u6b65\u544a\u8bc9\u670d\u52a1\u5668\u4f60\u5df2\u7ecf\u5b8c\u6210\u6240\u6709\u5206\u7247\u7684\u4e0a\u4f20\uff0c\u63a5\u4e0b\u6765\u5c06\u6bcf\u4e2a\u5206\u7247\u540d\u544a\u8bc9\u5408\u5e76\u7a0b\u5e8f\u5b8c\u6210\u6240\u6709\u5206\u7247\u7684\u5408\u5e76\uff0c\u5408\u5e76\u4e4b\u540e\u5c31\u662f\u4e00\u4e2a\u5b8c\u6574\u7684\u89c6\u9891\u6587\u4ef6\u3002<\/p>\n
<?php\n\n    \/\/ \u8bbe\u7f6e\u5141\u8bb8\u8de8\u57df\u8bbf\u95ee\n    header("Access-Control-Allow-Origin: *");\n    header("Access-Control-Allow-Methods: POST");\n    header("Content-Type: application\/json");\n    \n    \/\/ \u83b7\u53d6\u8bf7\u6c42\u4f53\u4e2d\u7684\u6587\u4ef6\u540d\n    $data = json_decode(file_get_contents("php:\/\/input") , true);\n    $fileName = isset($data['fileName']) ? $data['fileName'] : null;\n    if ($fileName) {\n        \n        $uploadDir = '.\/uploads\/';\n        $finalFilePath = $uploadDir . $fileName;\n        $totalChunks = count(glob($uploadDir . $fileName . '.*'));\n        \n        \/\/ \u68c0\u67e5\u662f\u5426\u6240\u6709\u5206\u7247\u90fd\u5df2\u4e0a\u4f20\n        if ($totalChunks > 0) {\n            \n            \/\/ \u6240\u6709\u5206\u7247\u90fd\u5df2\u4e0a\u4f20\uff0c\u5f00\u59cb\u5408\u5e76\n            $finalFile = fopen($finalFilePath, 'wb');\n            \n            \/\/ \u9010\u4e2a\u8bfb\u53d6\u5206\u7247\u5e76\u5199\u5165\u6700\u7ec8\u6587\u4ef6\n            for ($i = 0; $i < $totalChunks; $i++) {\n                $chunkFilePath = $uploadDir . $fileName . '.' . $i;\n                $chunkFile = fopen($chunkFilePath, 'rb');\n                stream_copy_to_stream($chunkFile, $finalFile);\n                fclose($chunkFile);\n                unlink($chunkFilePath); \/\/ \u5220\u9664\u5df2\u5408\u5e76\u7684\u5206\u7247\n                \n            }\n            \n            fclose($finalFile);\n            http_response_code(200);\n            echo json_encode(array(\n                'success' => '\u6587\u4ef6\u5408\u5e76\u6210\u529f',\n                'filePath' => $finalFilePath\n            ));\n        } else {\n            \n            http_response_code(400);\n            echo json_encode(array(\n                'error' => '\u6ca1\u6709\u4e0a\u4f20\u7684\u5206\u7247'\n            ));\n        }\n    } else {\n        \n        http_response_code(400);\n        echo json_encode(array(\n            'error' => '\u7f3a\u5c11\u6587\u4ef6\u540d'\n        ));\n    }\n?><\/code><\/pre>\n
\u7a0b\u5e8f\u76ee\u5f55<\/h2>\n
\u8bf7\u81ea\u884c\u521b\u5efa uploads<\/code><\/strong> \u76ee\u5f55\u3002
\"image.png\"<\/p>\n
\u4f5c\u8005<\/h2>\n
TANKING<\/p>\n
https:\/\/segmentfault.com\/a\/1190000044653992<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6458\u8981 \u89c6\u9891\u6587\u4ef6\u5206\u7247\u4e0a\u4f20\uff0c\u6574\u4f53\u601d\u8def\u662f\u5229\u7528JavaScript\u5c06\u6587\u4ef6\u5207\u7247\uff0c\u7136\u540e\u5faa\u73af\u8c03\u7528\u4e0a\u4f20\u63a5\u53e3 upload.ph […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-10008398","post","type-post","status-publish","format-standard","hentry","category-share"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10008398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10008398"}],"version-history":[{"count":0,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10008398\/revisions"}],"wp:attachment":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10008398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10008398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10008398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}