search

Home  >  Article  >  Web Front-end  >  Use JS+HTML5 to achieve image upload preview effect (example)

Use JS+HTML5 to achieve image upload preview effect (example)

怪我咯
怪我咯Original
2017-04-30 10:45:372617browse

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 Use JS+HTML5 to achieve image upload preview effect (example). 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：Detailed explanation of HTML5 to implement the function of taking and uploading photos on WeChatNext article：Detailed explanation of HTML5 to implement the function of taking and uploading photos on WeChat

Related articles

See more