لماذا لا يتم تحديد كل الصور 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{margin:0;outline:none}
img{width:200px}
</style>
</head>
<body>
<center>
<input type='file' accept="image/*" id='file'/><br>
          <img    id="out1" title="logo"><br>
          <img class="out1" title="logo"><br>
          <img class="out1" title="logo"><br>
</center>
    <script>
      function getBase64(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          console.log(reader.result.substring(0,100));
          document.getElementById('out1').src = reader.result;
          //لماذا لا يتم تحديد الكل
          document.querySelectorAll('.out1').src = reader.result;
        };
        reader.onerror=function(error){
          console.log('Error:',error);
        };
      }
      document.getElementById('file').addEventListener('change', function(event){
        const file = event.target.files[0];
        getBase64(file);
      });
    </script>
  </body>
</html>

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

أهلًا بك؛

لعمل اختيار متعدد يلزم إضافة الخاصية multible لحقل الإختيار

أيضًا عليك التعامل مع الصور المختارة كأنها مصفوفة لأنه ممكن المستخدم يختار أكثر من 10 >> وجدت أنك تتعامل مع صورة واحدة أو عدد محدد من الصور وهذا غير سليم 

على العموم هذا الكود لاختيار صور متعدد يمكنك استخدامه

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{margin:0;outline:none}
img{width:200px}
</style>
</head>
<body>
<center>
    <input id="browse" type="file" accept="image/*" onchange="previewFiles()" multiple>
    <div id="preview"></div>
</center>
   
<script>
function previewFiles() {

var preview = document.querySelector('#preview');
var files   = document.querySelector('input[type=file]').files;

function readAndPreview(file) {

  // Make sure `file.name` matches our extensions criteria
  if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
    var reader = new FileReader();

    reader.addEventListener("load", function () {
      var image = new Image();
      image.height = 100;
      image.title = file.name;
      image.src = this.result;
      preview.appendChild( image );
    }, false);

    reader.readAsDataURL(file);
  }

}

if (files) {
  [].forEach.call(files, readAndPreview);
}

}
</script>
  </body>
</html>
                   

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

لعمل اختيار متعدد يلزم إضافة الخاصية multible لحقل الإختيار المخصص لارفاق الصور

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن