jquery 다중 이미지 미리보기를 만드는 방법

jquery에서 단일 이미지 업로드 미리보기 기능입니다. 아래의 html 스크립트에서 볼 수있는 사진을 업로드하기 위해 각 상자와 같은 여러 기능을 개별적으로 변경하고 싶습니다.jquery 다중 이미지 미리보기를 만드는 방법

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<script> 

function imagepreview(input){ 
    if(input.files && input.files[0]){ 
     var filerd = new FileReader(); 
     filerd.onload=function(e){ 
      $('#imgpreview').attr('src', e.target.result); 
     }; 
     filerd.readAsDataURL(input.files[0]); 
    } 
    } 

</script> 
<style> 
body{ 
font-family:arial; 
} 
.wrap{ 
border:0px solid; 
width:40%; 
margin:10px auto; 
} 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
    text-align:center; 
    padding:10px; 
} 
#idupload{ 
    display:none; 
} 
.input-label{ 
    background-color:#009688; 
    color:#fff; 
    padding:5px 15px; 
} 
</style> 
</head> 
<body> 

<div class="wrap"> 
<table> 
    <tr> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    <th><img id="imgpreview" src="" width="100" height="100"></th> 
    </tr> 
    <tr> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    <td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td> 
    </tr> 
</table> 
</div> 

</body> 
</html>

출처

2017-01-06 Farooq

문제는 당신이 중복 된 ID의의를 가지고, 그리고 기능 imagepreview()는 항상 이미지 업로드와 같은 ID를 업데이트하고 있습니다. 이 문제를 해결하려면 각 이미지 미리보기에 고유 한 ID를 지정하고 파일 업로드 상자에 동일한 해당 지정을 배치하여 고유 한 파일 업로드 상자가 고유 한 이미지 미리보기를 업데이트합니다.

여기에 데모가 있습니다. 미리보기와 업로드에 모두 고유 ID를 부여한 다음 imagepreview()에서 업로드 상자 ID의 ID를 구문 분석하고 해당 페이지에서 업데이트 된 이미지 미리보기의 ID에 추가합니다. http://codepen.io/anon/pen/apOyZB

출처

2017-01-07 00:11:05

@Farooq 내기! –

fb에서 나를 추가 할 수 있습니까? – Farooq

동일한 기능에서 이미지 이벤트 삭제를 구현 하시겠습니까? – Farooq

jquery 다중 이미지 미리보기를 만드는 방법

답변

관련 문제