ادخال نص أو رفع صورة

ابورنـــــــد · 23 ديسمبر 2024

السلام عليكم ورحمة الله وبركاته

لدي حقلين الأول نص والثاني رفع صورة

أريد من المستخدم إدخل واحد منهم فقط وليس الاثنين

برأيكم ماهي افضل طريقة للتعامل مع هذا النوع من الادخال

- كيف اجبرة يختار واحد من الحقلين وليس الأثنين ؟

- هل بالامكان حفظ الادخال مهما كان نص او صورة في حقل في قاعدة البيانات وليكن A ( الصورة سيتم رفعها على مجلد وسيتم ادخال مسار الصورة في القاعدة )

- عند استعراض البيانات كيف اعرض المحتوى اذا كان صورة أو كان نص .

شكرا لكم

محمد عاطف17 · 23 ديسمبر 2024

وعليكم السلام ورحمة الله وبركاته.

أولا يمكنك التحقق من خلال كود جافا سكريبت ولكن يجب الإنتباه أنه من الممكن أن يتم تعطيله من قبل المستخدم لهذا لا يجب الإعتماد عليه ويجب إنشاء التحقق من الإدخال في الخادم.

أولا كود جافاسكريبت سيكون كالتالي حيث سنجعل هناك radio buttion لتحديد الخيار الذي سيختاره المستخدم وبناء عليه نعرض الحقول هكذا :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form>
              
        <p>
            أكتب إجابة أو إرفع صورة
        </p>

        <label dir="ltr"><input type="radio" name="input_type" value="text" onclick="toggleFields()"> نص</label>
        <label dir="ltr"><input type="radio" name="input_type" value="image" onclick="toggleFields()"> صورة</label>
        <br>
        <div id="text_field" style="display:none;">
          <label for="text_input">أدخل النص:</label>
          <input type="text" id="text_input" name="text_input">
        </div>
      
        <div id="image_field" style="display:none;">
          <label for="image_input">رفع الصورة:</label>
          <input type="file" id="image_input" name="image_input">
        </div>
      
        <button type="submit">إرسال</button>
      </form>
      
      <script>
        function toggleFields() {
          var textField = document.getElementById("text_field");
          var imageField = document.getElementById("image_field");
      
          if (document.querySelector('input[name="input_type"]:checked').value === 'text') {
            textField.style.display = 'block';
            imageField.style.display = 'none';
          } else {
            textField.style.display = 'none';
            imageField.style.display = 'block';
          }
        }
      </script>
</body>
</html>

والآن سيظهر الحقل بناء على الإختيار .

image.png.e77aa70914f430754d52ceb8ce7398fd.png

والآن في كود الخادم يمكنك التحقق من إدخال المستخدم سواء كان الإثنين أم لا :

if (!empty($_POST['text_input']) && !empty($_FILES['image_input']['name'])) {
        echo "يجب إدخال إما نص أو صورة فقط.";
    } else {
     // هنا كود إدخال البيانات في قاعدة البيانات وحفظ الصورة إذا تم رفع الصورة 
}

ويمكنك حفظ البيانات في نفس العمود في قاعدة البيانات وللتحقق من أن الحقل صورة أم نص عادة يمكنك البحث عن إمتداد الصور كالتالي :

if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $content)) {
  echo '<img src="' . $content . '" alt="Image">';
} else {
  echo $content;
}

لاحظ هنا أن المتغير content يحوي القيمة التي في قاعدة البيانات وهنا نتحقق منها سواء كانت صورة أم لا وبناء عليها نظهر الصورة أو النص.

ابورنـــــــد · 23 ديسمبر 2024

بتاريخ 4 دقائق مضت قال محمد عاطف17:
وعليكم السلام ورحمة الله وبركاته.

أولا يمكنك التحقق من خلال كود جافا سكريبت ولكن يجب الإنتباه أنه من الممكن أن يتم تعطيله من قبل المستخدم لهذا لا يجب الإعتماد عليه ويجب إنشاء التحقق من الإدخال في الخادم.

أولا كود جافاسكريبت سيكون كالتالي حيث سنجعل هناك radio buttion لتحديد الخيار الذي سيختاره المستخدم وبناء عليه نعرض الحقول هكذا :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form>
              
        <p>
            أكتب إجابة أو إرفع صورة
        </p>

        <label dir="ltr"><input type="radio" name="input_type" value="text" onclick="toggleFields()"> نص</label>
        <label dir="ltr"><input type="radio" name="input_type" value="image" onclick="toggleFields()"> صورة</label>
        <br>
        <div id="text_field" style="display:none;">
          <label for="text_input">أدخل النص:</label>
          <input type="text" id="text_input" name="text_input">
        </div>
      
        <div id="image_field" style="display:none;">
          <label for="image_input">رفع الصورة:</label>
          <input type="file" id="image_input" name="image_input">
        </div>
      
        <button type="submit">إرسال</button>
      </form>
      
      <script>
        function toggleFields() {
          var textField = document.getElementById("text_field");
          var imageField = document.getElementById("image_field");
      
          if (document.querySelector('input[name="input_type"]:checked').value === 'text') {
            textField.style.display = 'block';
            imageField.style.display = 'none';
          } else {
            textField.style.display = 'none';
            imageField.style.display = 'block';
          }
        }
      </script>
</body>
</html>
والآن سيظهر الحقل بناء على الإختيار .

والآن في كود الخادم يمكنك التحقق من إدخال المستخدم سواء كان الإثنين أم لا :
if (!empty($_POST['text_input']) && !empty($_FILES['image_input']['name'])) {
        echo "يجب إدخال إما نص أو صورة فقط.";
    } else {
     // هنا كود إدخال البيانات في قاعدة البيانات وحفظ الصورة إذا تم رفع الصورة 
}
ويمكنك حفظ البيانات في نفس العمود في قاعدة البيانات وللتحقق من أن الحقل صورة أم نص عادة يمكنك البحث عن إمتداد الصور كالتالي :
if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $content)) {
  echo '<img src="' . $content . '" alt="Image">';
} else {
  echo $content;
}
لاحظ هنا أن المتغير content يحوي القيمة التي في قاعدة البيانات وهنا نتحقق منها سواء كانت صورة أم لا وبناء عليها نظهر الصورة أو النص.

تسلم يمينك يامحمد

سيتم تجربة الكود وابلاغك بالنتيجة

ياسر مسكين · 24 ديسمبر 2024

بتاريخ 10 ساعة قال ابورنـــــــد:

السلام عليكم ورحمة الله وبركاته

لدي حقلين الأول نص والثاني رفع صورة

أريد من المستخدم إدخل واحد منهم فقط وليس الاثنين

برأيكم ماهي افضل طريقة للتعامل مع هذا النوع من الادخال

- كيف اجبرة يختار واحد من الحقلين وليس الأثنين ؟

- هل بالامكان حفظ الادخال مهما كان نص او صورة في حقل في قاعدة البيانات وليكن A ( الصورة سيتم رفعها على مجلد وسيتم ادخال مسار الصورة في القاعدة )

- عند استعراض البيانات كيف اعرض المحتوى اذا كان صورة أو كان نص .

شكرا لكم

يمكنك فرض شرط على المستخدم من خلال استخدام JavaScript للتأكد من أنه قام بإدخال واحد فقط من الحقلين فإذا كان المستخدم قد أدخل نصًا في الحقل الأول، يجب أن يكون الحقل الثاني فارغا، والعكس صحيح يمكن التحقق من هذه الشروط عند إرسال النموذج (form):

document.querySelector("form").onsubmit = function(event) {
    const textField = document.querySelector("#textField");
    const fileInput = document.querySelector("#fileInput");

    if (!textField.value && !fileInput.files.length) {
        alert("يرجى إدخال نص أو تحميل صورة.");
        event.preventDefault();
        return false;
    }
    
    if (textField.value && fileInput.files.length) {
        alert("يرجى إدخال نص أو تحميل صورة فقط.");
        event.preventDefault();
        return false;
    }
};

فإذا كان المستخدم قد أدخل نصا، يمكنك حفظه مباشرة في حقل نصي في قاعدة البيانات وإذا كان قد رفع صورة، يمكنك تخزين الصورة في مجلد مخصص على الخادم ثم حفظ مسار الصورة في قاعدة البيانات:

CREATE TABLE user_inputs (
    id INT PRIMARY KEY AUTO_INCREMENT,
    input_text TEXT,
    image_path VARCHAR(255)
);

وللاستعلام لإدخال البيانات في حالة ما إذا كان هناك نص فقط:

INSERT INTO user_inputs (input_text) VALUES ('نص المستخدم');

وإذا كانت هناك صورة فقط:

INSERT INTO user_inputs (image_path) VALUES ('path/to/image.jpg');

وعند استعراض البيانات من قاعدة البيانات، يمكنك التحقق إذا كان هناك نص أو مسار للصورة ومن ثم عرض المحتوى بناء على ذلك.

ابورنـــــــد · 24 ديسمبر 2024

بتاريخ 3 ساعة قال ياسر مسكين:
يمكنك فرض شرط على المستخدم من خلال استخدام JavaScript للتأكد من أنه قام بإدخال واحد فقط من الحقلين فإذا كان المستخدم قد أدخل نصًا في الحقل الأول، يجب أن يكون الحقل الثاني فارغا، والعكس صحيح يمكن التحقق من هذه الشروط عند إرسال النموذج (form):
document.querySelector("form").onsubmit = function(event) {
    const textField = document.querySelector("#textField");
    const fileInput = document.querySelector("#fileInput");

    if (!textField.value && !fileInput.files.length) {
        alert("يرجى إدخال نص أو تحميل صورة.");
        event.preventDefault();
        return false;
    }
    
    if (textField.value && fileInput.files.length) {
        alert("يرجى إدخال نص أو تحميل صورة فقط.");
        event.preventDefault();
        return false;
    }
};
فإذا كان المستخدم قد أدخل نصا، يمكنك حفظه مباشرة في حقل نصي في قاعدة البيانات وإذا كان قد رفع صورة، يمكنك تخزين الصورة في مجلد مخصص على الخادم ثم حفظ مسار الصورة في قاعدة البيانات:
CREATE TABLE user_inputs (
    id INT PRIMARY KEY AUTO_INCREMENT,
    input_text TEXT,
    image_path VARCHAR(255)
);
وللاستعلام لإدخال البيانات في حالة ما إذا كان هناك نص فقط:
INSERT INTO user_inputs (input_text) VALUES ('نص المستخدم');
وإذا كانت هناك صورة فقط:
INSERT INTO user_inputs (image_path) VALUES ('path/to/image.jpg');
وعند استعراض البيانات من قاعدة البيانات، يمكنك التحقق إذا كان هناك نص أو مسار للصورة ومن ثم عرض المحتوى بناء على ذلك.

تسلم اخوي ياسر

سيتم تجربته اليوم باذن الله

ابورنـــــــد · 27 ديسمبر 2024

بتاريخ On 24‏/12‏/2024 at 02:07 قال محمد عاطف17:
وعليكم السلام ورحمة الله وبركاته.

أولا يمكنك التحقق من خلال كود جافا سكريبت ولكن يجب الإنتباه أنه من الممكن أن يتم تعطيله من قبل المستخدم لهذا لا يجب الإعتماد عليه ويجب إنشاء التحقق من الإدخال في الخادم.

أولا كود جافاسكريبت سيكون كالتالي حيث سنجعل هناك radio buttion لتحديد الخيار الذي سيختاره المستخدم وبناء عليه نعرض الحقول هكذا :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form>
              
        <p>
            أكتب إجابة أو إرفع صورة
        </p>

        <label dir="ltr"><input type="radio" name="input_type" value="text" onclick="toggleFields()"> نص</label>
        <label dir="ltr"><input type="radio" name="input_type" value="image" onclick="toggleFields()"> صورة</label>
        <br>
        <div id="text_field" style="display:none;">
          <label for="text_input">أدخل النص:</label>
          <input type="text" id="text_input" name="text_input">
        </div>
      
        <div id="image_field" style="display:none;">
          <label for="image_input">رفع الصورة:</label>
          <input type="file" id="image_input" name="image_input">
        </div>
      
        <button type="submit">إرسال</button>
      </form>
      
      <script>
        function toggleFields() {
          var textField = document.getElementById("text_field");
          var imageField = document.getElementById("image_field");
      
          if (document.querySelector('input[name="input_type"]:checked').value === 'text') {
            textField.style.display = 'block';
            imageField.style.display = 'none';
          } else {
            textField.style.display = 'none';
            imageField.style.display = 'block';
          }
        }
      </script>
</body>
</html>
والآن سيظهر الحقل بناء على الإختيار .

والآن في كود الخادم يمكنك التحقق من إدخال المستخدم سواء كان الإثنين أم لا :
if (!empty($_POST['text_input']) && !empty($_FILES['image_input']['name'])) {
        echo "يجب إدخال إما نص أو صورة فقط.";
    } else {
     // هنا كود إدخال البيانات في قاعدة البيانات وحفظ الصورة إذا تم رفع الصورة 
}
ويمكنك حفظ البيانات في نفس العمود في قاعدة البيانات وللتحقق من أن الحقل صورة أم نص عادة يمكنك البحث عن إمتداد الصور كالتالي :
if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $content)) {
  echo '<img src="' . $content . '" alt="Image">';
} else {
  echo $content;
}
لاحظ هنا أن المتغير content يحوي القيمة التي في قاعدة البيانات وهنا نتحقق منها سواء كانت صورة أم لا وبناء عليها نظهر الصورة أو النص.

مشكورين الله يعطيكم العافية

ضبط معاي الكود

ادخال نص أو رفع صورة

السؤال

ابورنـــــــد

5 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

ابورنـــــــد

ياسر مسكين

ابورنـــــــد

ابورنـــــــد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية