Simple example of local preview effect of uploaded images implemented by jQuery-JS Tutorial-php.cn

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

亚连

Release： 2018-05-28 14:23:50

Original

1218 people have browsed it

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>

Copy after login

Running effect:

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

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!