업로드된 이미지 미리보기 효과 코드의 HTML5 구현-H5 튜토리얼-php.cn

업로드된 이미지 미리보기 효과 코드의 HTML5 구현

零下一度

풀어 주다： 2017-04-22 10:04:54

원래의

2676명이 탐색했습니다.

이 글에서는 업로드된 이미지의 미리보기 효과를 달성하기 위해 JS+HTML5를 주로 소개하며, 필요한 친구가 참조할 수 있는 자바스크립트 업로드 이미지의 로컬 미리보기 관련 구현 기술을 분석합니다.

이 글에서는 업로드된 이미지의 미리보기 효과를 얻기 위한 JS+HTML5의 예를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

프로젝트에서 입력 태그 파일 형식의 파일 업로드를 발견했고, 이전 솔루션을 업로드하기 전에 이미지를 미리 보고 싶었습니다. 파일을 먼저 업로드하려면 사용자의 기본 정보가 저장되지 않은 상태에서 아바타를 변경해야 할 경우 중복된 사진이 표시되므로 페이지에 반송 주소를 표시하는 것은 좋지 않습니다. 서버에 저장되었습니다.

온라인에서 다음과 같은 해결책을 찾았습니다.

<!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>

로그인 후 복사

위 내용은 업로드된 이미지 미리보기 효과 코드의 HTML5 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!