استخدام JavaScript مع HTML لتحويل امتداد الملف

يونيو 14, 2024

9٬599 2 دقائق

بالطبع، يمكننا استخدام JavaScript مع HTML لتحويل امتداد الملف. لكن، نظرًا لأن JavaScript يعمل على جانب العميل ولا يمكنه مباشرةً الوصول إلى نظام الملفات لكتابة الملفات أو إعادة تسميتها، سوف نحتاج إلى رفع الملف إلى الخادم باستخدام JavaScript ومن ثم تغيير امتداده على الخادم باستخدام لغة خادم مثل Node.js.

سأوضح كيفية القيام بذلك باستخدام Node.js كخادم، وHTML وJavaScript على العميل.

إعداد خادم Node.js لتغيير امتداد الملف

1. إعداد المشروع

أولاً، تأكد من تثبيت Node.js على جهازك.

ثم قم بإنشاء مجلد جديد لمشروعك وانتقل إليه من خلال سطر الأوامر:

mkdir file-extension-changer
cd file-extension-changer

2. تهيئة المشروع استخدام JavaScript مع HTML

قم بتهيئة مشروع Node.js باستخدام npm:

npm init -y

3. تثبيت الحزم المطلوبة

قم بتثبيت الحزم المطلوبة: express و multer.

npm install express multer

4. إنشاء خادم Node.js

قم بإنشاء ملف server.js وأضف الكود التالي:

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const port = 3000;

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/')
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname)
    }
});

const upload = multer({ storage: storage });

app.use(express.static('public'));

app.post('/upload', upload.single('file'), (req, res) => {
    const file = req.file;
    const newExtension = req.body.newExtension;

    if (file && newExtension) {
        const oldPath = file.path;
        const newPath = oldPath.substring(0, oldPath.lastIndexOf('.')) + newExtension;

        fs.rename(oldPath, newPath, (err) => {
            if (err) {
                return res.status(500).send('Error: ' + err.message);
            }
            res.send('File extension changed successfully. New file path: ' + newPath);
        });
    } else {
        res.status(400).send('Please select a file and enter a new extension.');
    }
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

قم بإنشاء مجلد uploads داخل مجلد المشروع لتخزين الملفات المرفوعة.

إنشاء واجهة المستخدم بـ JavaScript مع HTML

داخل مجلد المشروع، قم بإنشاء مجلد باسم public وأضف ملف index.html مع الكود التالي:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change File Extension</title>
</head>
<body>
    <form id="uploadForm">
        <input type="file" id="fileInput" name="file" />
        <input type="text" id="newExtensionInput" name="newExtension" placeholder="Enter new extension (e.g., .txt)" />
        <button type="submit">Change Extension</button>
    </form>
    <div id="message"></div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', async function(event) {
            event.preventDefault();

            const fileInput = document.getElementById('fileInput');
            const newExtensionInput = document.getElementById('newExtensionInput');
            const messageDiv = document.getElementById('message');

            if (fileInput.files.length === 0) {
                messageDiv.textContent = 'Please select a file.';
                return;
            }

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            formData.append('newExtension', newExtensionInput.value);

            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.text();
                messageDiv.textContent = result;
            } catch (error) {
                messageDiv.textContent = 'Error: ' + error.message;
            }
        });
    </script>
</body>
</html>

JavaScript مع HTML تشغيل الخادم

قم بتشغيل الخادم باستخدام الأمر التالي:

node server.js

سيكون الخادم متاحًا على http://localhost:3000. يمكنك الآن فتح متصفح الويب والدخول إلى هذا العنوان لاستخدام واجهة المستخدم لتحميل ملف وتغيير امتداده.

بهذه الطريقة، يمكن للمستخدمين تحميل ملف وتحديد الامتداد الجديد، بينما يقوم خادم Node.js بمعالجة تغيير الامتداد.