How does JS get the value of file in input and display it on the page

This article mainly shares an implementation method for JS to obtain the value of input[file] and display it on the page. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

The example is as follows:

$(document).on('change', '.photo-box .file', function () {
  //alert($(this).val());
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  var objUrl = getObjectURL(this.files[0]);
  console.log("objUrl = " + objUrl);
  var html = &#39;<p class="photo-box"><img src="&#39; + objUrl + &#39;" alt=""><p class="photo-btn"><p>删除</p></p></p>&#39;;
  $(this).parent().parent().append(html);
})

Related recommendations:

js clear input file content code for uploaded files

HTML5 type=file file upload function

How to clear the value of [type="file"] in the input

The above is the detailed content of How does JS get the value of file in input and display it on the page. For more information, please follow other related articles on the PHP Chinese website!