سوال عن 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

رابط هذا التعليق

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية