Rumah > Artikel > hujung hadapan web > jQuery实现的上传图片本地预览效果简单示例

jQuery实现的上传图片本地预览效果简单示例

亚连asal: 2018-05-28 14:23:501205semak imbas

这篇文章主要介绍了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">
$(&#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>

运行效果：

上面是我整理给大家的，希望今后会对大家有帮助。

快速解决vue-cli不能初始化webpack模板的问题

解决vue-cli + webpack 新建项目出错的问题

基于webpack.config.js 参数详解

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：JavaScript面试出现频繁的一些易错点整理Artikel seterusnya：怎样使用基于Vue的延迟加载插件vue-view-lazy

Artikel berkaitan

Lihat lagi