>  기사  >  웹 프론트엔드  >  입력 유형에 대한 자세한 설명=사진을 선택하고 미리보기 효과를 얻기 위한 파일

입력 유형에 대한 자세한 설명=사진을 선택하고 미리보기 효과를 얻기 위한 파일

小云云
小云云원래의
2018-01-02 16:00:294134검색

이 글에서는 주로 입력 유형=파일로 이미지를 선택하고 미리보기 효과를 얻는 예를 소개합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

태그를 통해 유형을 파일로 지정하세요. 그러면 파일 업로드가 가능합니다.

accept: 업로드 유형을 선택할 수 있습니다. 예를 들어 사진을 업로드하는 한 제한이 없습니다. 사진 형식은 image/*입니다.

multiple: 여러 파일을 선택할 수 있는지 여부를 규정합니다.

사진만 업로드할 수 있으며 여러 파일을 선택할 수 있음을 규정합니다.

<input type="file" accept="image/*" multiple="multiple"/>

물론 직접 입력 유형= 파일은 업로드된 파일/리소스만 선택할 수 있습니다. 사진을 선택한 후 현재 페이지에서 미리보기 효과를 얻으려면 다음과 같이 구현할 수 있습니다

HTML 코드

<body>
  <p id="box">
    <img id="imgshow" src="" alt=""/>
  </p>
  <p id="pox">
    <input id="filed" type="file" accept="image/*"/>
  </p>
</body>

css 스타일 파일

<style>
    #box{
      width: 300px;
      height: 300px;
      border: 2px solid #858585;
    }
    #imgshow{
      width: 100%;
      height: 100%;
    }
    #pox{
      width: 70px;
      height: 24px;
      overflow: hidden;
    }
  </style>

JS 코드

<script>
    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
    //获取input file的files文件数组;
    //$('#filed')获取的是jQuery对象,.get(0)转为原生对象;
    //这边默认只能选一个,但是存放形式仍然是数组,所以取第一个元素使用[0];
      var file = $('#filed').get(0).files[0];
    //创建用来读取此文件的对象
      var reader = new FileReader();
    //使用该对象读取file文件
      reader.readAsDataURL(file);
    //读取文件成功后执行的方法函数
      reader.onload=function(e){
    //读取成功后返回的一个参数e,整个的一个进度事件
        console.log(e);
    //选择所要显示图片的img,要赋值给img的src就是e中target下result里面
    //的base64编码格式的地址
        $('#imgshow').get(0).src = e.target.result;
      }
    })
</script>

*jQuery는 위의 js 코드에서 사용되므로 jQuery를 도입해야 합니다. File

관련 권장 사항:

사진 선택을 위한 파일 제어 예제 튜토리얼

HTML5 Plus 사진 촬영 기능을 구현하는 예제 코드 또는 모바일 앱에서 앨범에 업로드할 사진 선택

사진을 선택한 후 입력이 시간에 맞춰 업로드 및 표시되지 않습니다

위 내용은 입력 유형에 대한 자세한 설명=사진을 선택하고 미리보기 효과를 얻기 위한 파일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.