这篇文章主要介绍了jQuery实现的上传图片本地预览效果,结合实例形式分析了jQuery上传图片本地预览所涉及的相关页面元素属性动态操作实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的上传图片本地预览效果。分享给大家供大家参考，具体如下：
<!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>运行效果：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci jQuery实现的上传图片本地预览效果简单示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Cara mengubah suai teks dalam gambar
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Apa yang perlu dilakukan jika imej terbenam tidak dipaparkan sepenuhnya
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
