Upload Files and Images

In this example, an HTML form element is used to contain an input element of type "file" and an <img> element. The input element has an accept attribute with the value "image/*", which allows the user to select only image files. The <img> element has an id attribute with the value "blah", and its src attribute is set to "#" (a placeholder value).

The JavaScript code defines an onchange event listener for the input element. When the input element's value changes (i.e. when the user selects a file), the event listener is triggered. The event listener gets the selected file from the imgInp.files array, and if a file was selected, it sets the src attribute of the <img> element to a URL representing the file, created using the URL.createObjectURL() function. This causes the selected image file to be displayed in the <img> element.

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

This example is similar to the first, but uses a different approach to display the selected image file. An HTML input element of type "file" and an <img> element are used, with the input element having an accept attribute with the value "image/*" and an onchange attribute that calls a loadFile() function when the file selection changes.

The loadFile() function is defined in a <script> element and takes an event object as its argument. The function gets the selected file from the event.target.files array and sets the src attribute of the <img> element to a URL representing the file, created using the URL.createObjectURL() function. An onload event listener is also defined for the <img> element, which revokes the object URL using the URL.revokeObjectURL() function when the image has finished loading. This frees up memory used by the object URL.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>

This example is also similar to the first two, but uses the FileReader object to read the selected image file and display it in the <img> element. An HTML input element of type "file" and an <img> element are used, with the input element having an accept attribute with the value "image/*" and an onchange attribute that calls a loadFile() function when the file selection changes.

The loadFile() function is defined in a <script> element and takes an event object as its argument. The function creates a new FileReader object and defines an onload event listener for it. When the file has been successfully read, the event listener sets the src attribute of the <img> element to the result property of the FileReader object, which contains the contents of the file. The function then calls the readAsDataURL() method of the FileReader object, passing it the selected file from the event.target.files array, to start reading the file.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

This example is similar to the first, but the src attribute of the <img> element is directly set to the URL created using URL.createObjectURL() when the file input's onchange event is triggered, instead of using an event listener.

<img id="blah" alt="your image" width="100" height="100" />

<input type="file"
       onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">