input file html code example

Example 1: input a file in html form

<form action="{% url 'submit' %}" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
  		<div class="mb-3">
            <label for="formFile" class="form-label">Image</label>
            <input class="form-control" type="file" id="formFile" name="image" accept="image/*">
        </div>

        <button class="btn btn-outline-info" type="submit">Submit</button>
</form>

Example 2: input limit file type html

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".jpg,.png,.pdf" />

Example 3: input type="file" and display image

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="200" /></p>

<script>
var loadFile = function(event) {
	var image = document.getElementById('output');
	image.src = URL.createObjectURL(event.target.files[0]);
};
</script>

Example 4: input file define type

<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

Example 5: how to take a file input in html form

<label for="myfile">Select a file:</label>
<input type="file" 
  id="myfile" name="myfile">

Example 6: how to use input type file and show selected file on screen

updateList = function() {
  var input = document.getElementById('file');
  var output = document.getElementById('fileList');

  output.innerHTML = '<ul>';
  for (var i = 0; i < input.files.length; ++i) {
    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';
  }
  output.innerHTML += '</ul>';
}