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

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

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

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

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

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

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

관련 기사