HTML5 implementation of uploaded image preview effect code-H5 Tutorial-php.cn

HTML5 implementation of uploaded image preview effect code

零下一度

Release： 2017-04-22 10:04:54

Original

2716 people have browsed it

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>

Copy after login

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!