Rumah > Artikel > hujung hadapan web > jQuery实现带有本地预览功能的图片上传
jQuery实现带有本地预览功能的图片上传
- php中世界最好的语言asal
- 2018-04-27 17:11:192389semak imbas
这次给大家带来jQuery实现带有本地预览功能的图片上传，jQuery实现带有本地预览图片上传的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>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>
运行效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci jQuery实现带有本地预览功能的图片上传. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS新手易错点整理Artikel seterusnya：JS中new()实现了哪些功能？