Home  >  Article  >  Web Front-end  >  How does JS get the value of input[file] and display it on the page? (Picture and text tutorial)

How does JS get the value of input[file] and display it on the page? (Picture and text tutorial)

亚连
亚连Original
2018-05-31 14:17:162411browse

Below I will share with you a JS implementation method 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.

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);
})

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

Example of vue combined with Echarts to achieve click highlighting effect

vue implements a label click highlighting Method

Vue-Highlight setting method of routing navigation menu bar

##

The above is the detailed content of How does JS get the value of input[file] and display it on the page? (Picture and text tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn