版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39135287/article/details/80468125
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery上传图片时,可以显示图片预览效果</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input id="myfile" type="file"><br/>
<img src="" id="show" width="200">
<script type="text/javascript">
$(function() {
$("#myfile").change(function() {
var readFile = new FileReader();
var mfile = $("#myfile")[0].files[0]; //注意这里必须时$("#myfile")[0],document.getElementById('file')等价与$("#myfile")[0]
readFile.readAsDataURL(mfile);
readFile.onload = function() {
var img = $("#show");
img.attr("src", this.result);
}
});
})
</script>
</body>
</html>