Use JS+HTML5 to achieve image upload preview effect (example)-H5 Tutorial-php.cn

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

怪我咯

Release： 2017-04-30 10:45:37

Original

2559 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 Use JS+HTML5 to achieve image upload preview effect (example). For more information, please follow other related articles on the PHP Chinese website!