كيف ارفع صورة من الجهاز واضعها كخلفية لدف معين؟

لنفرض أن لديك زر اختيار صورة مع عنصر div

<input type='file' id='getFile' name="background-image" /><br/><br/>

<div id='divimg'>
سوف نضع هنا صورة
</div>

و تنسيق بسيط للdiv

#divimg{
   background-image:url('');
   background-size:cover;
   background-position: center;
   height: 250px; width: 250px;
   border: 1px solid #bbb;
}

بقي التحكم برمجاً بوضع الصورة من الملف كخلفية و يمكن ذلك عن طريق جافاسكربت.

• عند تغير الصورة المحددة بعنصر input
• سوف نقرأ الملف من خلال دالة readURL

FileReader

• هو كائن يساعد في التعامل مع الملفات

document.getElementById('getFile').addEventListener('change', readURL, true);
function readURL(){
// نجلب الملف
   var file = document.getElementById("getFile").files[0];
   var reader = new FileReader();
// عند تحميل الملف نقوم بإسناد الصورة
   reader.onloadend = function(){
      document.getElementById('divimg').style.backgroundImage = "url(" + reader.result + ")";        
   }
   if(file){
      reader.readAsDataURL(file);
    }else{
    }
}

حل جافاسكربت آخر من خلال

createObjectURL

الذي يعمل رابط محلي للملف المرفوع

function readURL(event){
         var getImagePath = URL.createObjectURL(event.target.files[0]);
         $('#divimg').css('background-image', 'url(' + getImagePath + ')');
        }