كيفية اضافة صورتين في input file جافا سكريبت / جيكويري

Samer Alashqar · 11 مايو 2022

السلام عليكم ..

لدي حقلين من input file و lable الذي يمكنني من اظهار الصورة ، المشكلة انه عند الضغط على خانة الصورة الثانية واختيار الصورة تظهر الصورة في الخانة الأولى ولا استطيع ان اظهر الا صورة واحدة فقط في احدى الخانات كيف استطيع حل المشكلة واظهار صورة مختلفة في كل خانة ؟

<input type="file" id="img" onchange="imageToBase64(this),image(event)"style="display: none; visibility: none;">
      <label  class="btn img-lable float-end" for="img">
        <img src="/img/empty2.jpg" id="product-img" width="430" class="product-img-add"  class="mt-3">
        <input style="width:300%;" hidden type="text" name="proImg" class="input-add-pro"  id="proImg">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor"
          class="add-product-img bi bi-plus-circle-fill" viewBox="0 0 16 16">
          <path
            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />
        </svg>
      </label>

      <input type="file" id="img" onchange="imageToBase64(this),image(event)"style="display: none; visibility: none;">
      <label  class="btn img-lable float-end" for="img">
        <img src="/img/empty2.jpg" id="product-img" width="430" class="product-img-add"  class="mt-3">
        <input style="width:300%;" hidden type="text" name="proImg" class="input-add-pro"  id="proImg">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor"
          class="add-product-img bi bi-plus-circle-fill" viewBox="0 0 16 16">
          <path
            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />
        </svg>
      </label>

// image to base64
    function imageToBase64 (image) {
    
    var img = image.files[0];
    base64 = null;
    var reader = new FileReader();
    reader.onloadend = function() {
    base64 = reader.result.split(',')[1] 
    $('#proImg').val($('#proImg').val() + base64);
    
}

    reader.readAsDataURL(img);
    
}
function image (event) {
	var image = document.getElementById('product-img');
	image.src = URL.createObjectURL(event.target.files[0]);
  
};

Hassan Hedr · 11 مايو 2022

حاول عند محاولة تغيير عنوان مصدر الصورة src للوسم img أن تصل للوسم الخاص بالحقل input عن طريق أبناءه وليس عن طريق البحث عن المعرف product-img، عدل التابع image ليكون كالتالي:

function image (event) {
	var image = $(event.target).children('img#product-img');
	image.src = URL.createObjectURL(event.target.files[0]);
};

Wael Aljamal · 11 مايو 2022

كما تعلمت مسبقاً نتجنب استخدام نفس المعرف id لأكثر من عنصر في صفحة الويب لأنه يجب أن يكون فريد من نوعه. (هو شيء من أساسيات HTML لايعطي خطأ لكن كما مشكلتك لا يعمل بشكل سليم)

يمكنك استخدام معرفين مختلفين و تمرير المعرف ضمن الدالة

onchange="imageToBase64(this),image(event,'1');"

, الدالة:

function image (event, id) {
	var image = document.getElementById('product-img-' + id);
                                        //       ^^^^^^^^^
	image.src = URL.createObjectURL(event.target.files[0]);
  
};

والتعديل في العناصر لتغيير المعرف

id="product-img-1"

id="product-img-2"

كيفية اضافة صورتين في input file جافا سكريبت / جيكويري

السؤال

Samer Alashqar

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

Recommended Posts

Hassan Hedr

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية