tdimdev نشر 28 ديسمبر 2019 أرسل تقرير مشاركة نشر 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> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Entesar Khaled نشر 29 ديسمبر 2019 أرسل تقرير مشاركة نشر 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> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 خالد كامل2 نشر 9 يناير 2020 أرسل تقرير مشاركة نشر 9 يناير 2020 لعمل اختيار متعدد يلزم إضافة الخاصية multible لحقل الإختيار المخصص لارفاق الصور اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
tdimdev
لماذا لا يتم تحديد كل الصور
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.