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">
$('#upload').change(function(){
// 获取FileList的第一个元素
alert(document.getElementById('upload').files[0]);
var f = document.getElementById('upload').files[0];
src = window.URL.createObjectURL(f);
document.getElementById('preview').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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
