-4

I am creating a web page that can receive an image and set it as a background image.

My work till now:

function a(a) {
  document.body.style.backgroundImage = "url(a.value)";
}
<input type="file" onchange="a(this);">

Since the value comes as C:\fakepath\Image.extension, the background doesn't changes. So, can you please help me to do this using javascript only. I know this is a very strange question. But it will help me to learn something new and can help others too.

31piy
  • 23,323
  • 6
  • 47
  • 67
  • I'm sorry. I don't know how to ask questions properly. I had even read the page which helps to know us how to ask good questions. But nothing worked. Can you please help me to improve the question? Thanks for the comment. –  Mar 10 '18 at 16:55
  • [Here's a link to many sites that talk about it](https://duckduckgo.com/?q=how+to+ask+questions+on+stack+overflow&t=ironbrowser&ia=web) –  Mar 10 '18 at 22:16

2 Answers2

3

You need to read the contents of the selected file using HTML5 FileReader API then get base64 encoded Data-URL of it. Then you can set this URL as background of anything.

If you don't know Data-URL is a type of URI that does not point to the location of a file, rather it holds the whole content of the file in base64 encoded format inside the URL. Any file can be converted to a Data-URL. You can read more about it here.

Note: Data-URI is only preferred for small files. Do not convert megabyte size files into Data-URI.

function previewFile(fileInput) {
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function() {
    setBackground(reader.result);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
function setBackground(imageURL){
    document.body.style.backgroundImage = "url(" + imageURL + ")";
    document.body.style.backgroundSize = "100% auto";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundPosition = "center top";
}
<input type="file" onchange="previewFile(this);">
Munim Munna
  • 17,178
  • 6
  • 29
  • 58
  • It works!! Can you please tell me how can I set style for this background. For example use `background-size: auto;` property for this. Do I need to place this in the body's style? –  Mar 19 '18 at 14:15
  • You can add `background-size`,`background-repeat`,`background-position` all CSS styles to `document.body.style`. – Munim Munna Mar 19 '18 at 14:17
  • I am sorry I had now received a better answer. So, I will not be able to reward you. –  Mar 20 '18 at 11:52
  • Surely the better answer should be accepted and rewarded. This is how this site works. – Munim Munna Mar 20 '18 at 12:05
3

Simply wrap the File blob into an Object-URL (URL.createObjectURL) and set that as source for the CSS background image.

This will simplify your code, the image will be processed faster and image size will be less of a problem:

document.querySelector("input").onchange = function() {
  var url = URL.createObjectURL(this.files[0]);
  document.body.style.background = "url(" + url + ") no-repeat";
}
<input type="file">
  • I didn't know the `fakepath` can also be used as background :P – Munim Munna Mar 20 '18 at 12:00
  • Sorry, what do you mean by "fakepath"? –  Mar 20 '18 at 20:47
  • The path of the selected file, as referenced [here](https://stackoverflow.com/q/4851595/9276329). – Munim Munna Mar 21 '18 at 04:54
  • Ah, that fakepath. No, those are not directly related, it's not using an actual path to the file in the system. It uses a pseudo-protocol (blob: via the Object-URL) which references data in memory (or via an file lock managed internally by the browser). There is luckily no direct access to the filepath itself. –  Mar 21 '18 at 08:37
  • 1
    Great to know that :) – Munim Munna Mar 21 '18 at 08:42
  • it gives me "blob:null/3e399d60-83ec-4469-ae00-9ba2350c1d4a" what do I do? – codeWithMe Apr 17 '19 at 10:20