0

I'm developing a website to recommend clothes. So, I want customers to put their image which is in their local.

First, I tried <input type='file' accept='image/*' ~~>. But it doesn't provide customizing option. I must show the button with my picture. Therefore I tried button option and write the code like this.

function openImageFile() {
  var input = document.createElement("input");

  input.type = "file";
  input.accept = "image/*";

  input.click();
  input.onchange = function(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
      var dataurl = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
      output.width = 125;
      output.height = 125;
    };
    photo = input.files[0];
    reader.readAsDataURL(input.files[0]);
  }
}
<button type="button" id="test" onclick="openImageFile()"><img src="blah.png"></button>
<img id='output'>`
j08691
  • 204,283
  • 31
  • 260
  • 272
Arialeun
  • 1
  • Help with what, specifically? In what observable way does this code not do what you expect? Is there an error? An unexpected result? Something else? Have you looked at your browser's debugging tools? Done any debugging? – David Mar 17 '21 at 15:07
  • No sure if this is what want, but if you want to customize the input with type file, then check [Styling an input type=“file” button](https://stackoverflow.com/q/572768/387194) there are different solutions. I prefer the solution with input that is very big and have `opacity: 0`. Transparent input forms elements still works, so they will open file picker. – jcubic Mar 17 '21 at 16:40

1 Answers1

0

Convert your image to data protocol. Converter: https://base64.guru/converter/encode/image Set the src of your image element to:

<image src="data:image/png;base64,OUPUT_FROM_ENCODER" />

This allows your website to load a image without it being hosted by a URL

cs641311
  • 1