Home > Article > Web Front-end > HTML5 implementation of uploaded image preview effect code

HTML5 implementation of uploaded image preview effect code

零下一度Original: 2017-04-22 10:04:542681browse

This article mainly introduces JS+HTML5 to realize the preview effect of uploaded images. It analyzes the specific operation steps and related implementation techniques of local preview of javascript uploaded images in the form of a complete example. Friends in need can refer to the following

This article describes the example of JS+HTML5 to achieve the preview effect of uploaded images. Share it with everyone for your reference, the details are as follows:

In the project, I encountered a file upload with the input tag file type, and I wanted to preview the image before uploading; a previous solution was to first upload the file Uploading and then displaying the return address on the page is not good, because the user's basic information may not be saved, but the avatar has been changed. If it needs to be changed, it will cause redundant pictures to be saved on the server.

I found a solution online, as shown below:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>html5 图片上传预览</title>
  <style>
    #preview {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
    #preview img {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    function preview1(file) {
      var img = new Image(), url = img.src = URL.createObjectURL(file)
      var $img = $(img)
      img.onload = function() {
        URL.revokeObjectURL(url)
        $(&#39;#preview&#39;).empty().append($img)
      }
    }
    function preview2(file) {
      var reader = new FileReader()
      reader.onload = function(e) {
        var $img = $(&#39;<img>&#39;).attr("src", e.target.result)
        $(&#39;#preview&#39;).empty().append($img)
      }
      reader.readAsDataURL(file)
    }
     
    $(function() {
      $(&#39;[type=file]&#39;).change(function(e) {
        var file = e.target.files[0]
        preview1(file)
      })
    })
  </script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
  <input type="file" name="imageUpload"/>
  <p id="preview" style="width: 300px;height:300px;border:1px solid gray;"></p>
</form>
</body>
</html>

The above is the detailed content of HTML5 implementation of uploaded image preview effect code. 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

Previous article：Share several cool image effects implemented in HTML5Next article：Share several cool image effects implemented in HTML5

See more

HTML5 implementation of uploaded image preview effect code

Related articles