카테고리 없음

이미지 업로드 미리보기 , react slide 만들기

seongjin08 2021. 11. 23. 19:42

html 

더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
 
<input type="file" id="files" multiple />
<img id="image" />
<script type="text/javascript">
document.getElementById("files").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
// get loaded data and render thumbnail.
document.getElementById("image").src = e.target.result;
console.log(e);
console.log(e.target.result);
}; // read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
};
</script>
</body>
</html>

react

input type file 로  만들어 여러장의 사진을 받을경우

for 문을 돌려 하나의 사진 마다 바로 확인할수 있는 url를 만들어 준다.

URL.createObjecctURL() 함수의 인자값으로 사진 한장씩 넣어 

실행 시켜주면 url을 반환 해준다.

이걸 배열에 담아서 미리 보기 할곳  img src 안에 url 을 넣어주면 된다.

배열이니 map을 돌리면 된다.

이왕이면 슬라이드로 만들어 주면 보기좋으니 슬라이드 라이브러리 를 사용해보는 것도 좋을것이다.

 

만약 사진이 한장일경우 for 문 map 만 뻬고 똑같이 하면된다.

 

react slide 만들기

더보기

import React, { Component } from "react";

import Slider from "react-slick";

 

export default class SimpleSlider extends Component {

render() {

const settings = {

dots: true,

infinite: true,

speed: 500,

slidesToShow: 1,

slidesToScroll: 1

};

return (

<div>

      <h2> Single Item</h2>

      <Slider {...settings}>

    <div>

       <h3>1</h3>

     </div>

     <div>

       <h3>2</h3>

     </div>

     <div>

       <h3>3</h3>

      </div>

      <div>

       <h3>4</h3>

       </div>

       <div>

        <h3>5</h3>

        </div>

        <div>

          <h3>6</h3>

         </div>

    </Slider>

</div>

);

}

}

이런 결과물을 얻을수 있다.

 

만약 CSS 를 입히고 싶다면 

이런식으로 코드를 살짝 변형해서 사용해 주면 된다.

근데 안에 항목들을 일일히 개발자도구에서 class name 을 찾아야 한다.

살짝 번거롭지만 하드코딩으로 만드는거보다는 더 빠를게 활용이 가능하다.

'카테고리 없음'의 다른글

  • 현재글이미지 업로드 미리보기 , react slide 만들기

티스토리툴바