Home  >  Article  >  Web Front-end  >  Use jQuery to preview images locally when uploading them

Use jQuery to preview images locally when uploading them

php中世界最好的语言
php中世界最好的语言Original
2018-05-03 09:12:531379browse

This time I will introduce to you how to use jQuery to realize When uploading pictures, you can preview them locally first. Which ones, the following are practical cases, let’s take a look.

<!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>
Operation effect:

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

Methods for element-ui control to operate iview

What are the methods for vue parent components to call child components

How to use the diff algorithm

The above is the detailed content of Use jQuery to preview images locally when uploading them. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn