CODEWITHSUNDEEP
javascriptjquerycss
Дима Лукашов
Дима Лукашов

Reputation: 1

How can background-image be changed on client side?

I have a problem. I need to create one feature for site. User can select image on his computer and that image have to be installed as background-image in body. But I have two problems:

  1. Server is so weak and it can't get a lot of pictures.
  2. If we change background-image on server it is automatically changed for every user.

What can I do to solve it?

Upvotes: 0

Views: 79

Answers (1)

ShacharW
ShacharW

Reputation: 207

  1. Here is how to upload an image in a browser (using jQuery):

HTML:

<input type='file'/>
<img id="someImage" src="#"/>

Javascript:

$(function(){
  $(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = onImageLoaded;
        reader.readAsDataURL(this.files[0]);
    }
  });
})

function onImageLoaded(e){
  $('#someImage').attr('src', e.target.result)
}
  1. If you want to persist the image in server, you could convert the image to base64 and even shrink the image, and send it to server.

Upvotes: 1

Related Questions