سوال عن js

tdimdev · 28 ديسمبر 2019

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

<!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>

Entesar Khaled · 29 ديسمبر 2019

أهلًا بك؛

لعمل اختيار متعدد يلزم إضافة الخاصية 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>

خالد كامل2 · 9 يناير 2020

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

سوال عن js

السؤال

tdimdev

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

Recommended Posts

Entesar Khaled

خالد كامل2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية