search

Home >Web Front-end >JS Tutorial >Simple example of local preview effect of uploaded images implemented by jQuery

Simple example of local preview effect of uploaded images implemented by jQuery

亚连
亚连Original
2018-05-28 14:23:501239browse

This article mainly introduces the local preview effect of uploaded images implemented by jQuery, and analyzes the dynamic operation implementation techniques of relevant page element attributes involved in the local preview of jQuery uploaded images in the form of examples. Friends in need can refer to the following

The example of this article describes the local preview effect of uploaded images implemented by jQuery. Share it with everyone for your reference, the details are as follows: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$(&#39;#upload&#39;).change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById(&#39;upload&#39;).files[0]);
  var f = document.getElementById(&#39;upload&#39;).files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById(&#39;preview&#39;).src = src
})
</script>
</body>
</html>

Running effect:

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

Related articles:

Quickly solve the problem that vue-cli cannot initialize the webpack template

Solve vue-cli webpack New Problems with project errors

Detailed explanation based on webpack.config.js parameters

The above is the detailed content of Simple example of local preview effect of uploaded images implemented by jQuery. 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
Previous article：A compilation of some common mistakes in JavaScript interviewsNext article：A compilation of some common mistakes in JavaScript interviews

Related articles

See more