1

I was thinking I could use an <input type="file"> to actually upload the file, and that I would use document.write() to put it on the site. Essentially I'm looking for some sort of temporary (or permanent, whatever) image hosting on a page, where you upload a file and it appears on the page without complex handling, redirects, or any language besides HTML and JS. Any suggestions?

ThatCrazyCow
  • 469
  • 2
  • 5
  • 17
  • you don't need to upload it to show it. just use FileReader to get a dataURL, or window.URL and a blob. – dandavis Jul 13 '17 at 18:35
  • @dandavis AFAIK you don't even need `FileReader`, as what you have is already a `File` object. `File` extends `Blob`, so you can create a dataURL directly from that. – John Weisz Jul 13 '17 at 18:36
  • 1
    If you really want to upload a file then you would have to write some server side code. If as Dan and John above have said, you just want to show the selected image on the page, then that's possible in JS alone: https://stackoverflow.com/questions/17138244/how-to-display-selected-image-without-sending-data-to-server – Rory McCrossan Jul 13 '17 at 18:38

1 Answers1

4

function preview(file){
  if (file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function () {
      document.getElementById("img").src = reader.result;
    }
  }
}
<input type="file" accept="image/*" onchange="preview(this.files[0])"/>
<br\>
<img id="img"/>
Tomer Wolberg
  • 1,256
  • 10
  • 22