diff --git a/templates/html/blog_upload.html b/templates/html/blog_upload.html
index 10c2019a6245967035ac2ef9c5b3bf6fe7fe53c1..acdafed0f95baec5ef7e5ad79b7dca28eb7a6a5a 100644
--- a/templates/html/blog_upload.html
+++ b/templates/html/blog_upload.html
@@ -14,14 +14,19 @@
             type="text/javascript"
             src="/assets/js/bootstrap.bundle.min.js"
         ></script>
+        <script
+            type="text/javascript"
+            src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"
+        ></script>
         <script>
-            function validate(event) {
+            function validateAndPreview(event) {
                 console.log(event.target.files[0].name);
                 let file = event.target.files[0];
                 if (file) {
-                    let fileName = file.name;
-                    if (fileName.split(".").length > 1) {
-                        if ("md" !== fileName.split(".")[1]) {
+                    const fileName = file.name;
+                    const fileExtension = fileName.split(".");
+                    if (fileExtension.length > 1) {
+                        if ("md" !== fileExtension[fileExtension.length - 1]) {
                             showModel(
                                 "错误",
                                 "文件格式不正确，请选择Markdown文件！",
@@ -31,6 +36,8 @@
                             return;
                         } else {
                             changeButtonStatus(true);
+                            //预览文件
+                            previewFile(file);
                         }
                     } else {
                         showModel(
@@ -48,6 +55,17 @@
                 }
             }
 
+            function previewFile(file) {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    const preview = document.getElementById("preview");
+                    const content = e.target.result;
+                    const html_content = marked.parse(content);
+                    preview.innerHTML = html_content;
+                };
+                reader.readAsText(file);
+            }
+
             function showModel(title, content) {
                 document.getElementById("modelTitle").textContent = title;
                 document.getElementById("modelContent").innerHTML = content;
@@ -115,7 +133,7 @@
                         type="file"
                         name="file"
                         id="uploadFile"
-                        onchange="validate(event)"
+                        onchange="validateAndPreview(event)"
                     />
 
                     <button
@@ -167,7 +185,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-8">预览 todo</div>
+                <div class="col-8">
+                    <h3>预览</h3>
+                    <pre id="preview" aria-placeholder="预览"></pre>
+                </div>
             </div>
         </div>
     </body>