이미지를 선택할 때 미리보기 div 표시

나는 선택한 이미지의 미리보기 이미지를 표시하기위한 이미지 미리보기 div가 있습니다. 지금까지는 잘 작동합니다. 하지만 사용자가 업로드 할 이미지를 선택할 때 페이지가로드되고 표시 될 때이 div를 숨기고 싶습니다. heres는 내 코드의 구조 :이미지를 선택할 때 미리보기 div 표시

<div class="fileinput fileinput-new" data-provides="fileinput"> 
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px; display:none"></div> #This is the div for previewing images 
<div> 
<span class="btn btn-info btn-file"> 
<span class="fileinput-new">Select image</span> 
<span class="fileinput-exists">Change</span> 
<input type="file" name=""></span>

Heres는 내 JQuery와 : 내가 그것을 할 것이라고 생각했던 (jQuery로 그 첫 시간)

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".btn btn-info btn-file").click(function(){ 
     $(".fileinput-preview thumbnail").show(); 
     }); 
}); 
</script>

jsFiddlehttp://jsfiddle.net/3717h5mg/1/

것은이 작동하지 않습니다.

출처

2014-11-25 catastropic

'$를 (". btn.btn-info.btn 파일")'과'$ (".fileinput-preview.thumbnail"). show();'클래스 선택자 사이의 공간을 제거하십시오. – Abhitalks

그게 도움이 안된다 !! – catastropic

왜 안 되니? 여기를 참조하십시오 : http://jsfiddle.net/abhitalks/354k5wh6/ – Abhitalks

는

$(document).ready(function(){ 
    $(".btn.btn-info.btn-file").change(function(){ 
     $(".fileinput-preview.thumbnail").show(); 
    }); 
});

참고하십시오 : (.)이 점을 놓친 선택을 클릭하여 $ (". btn을 BTN-정보 BTN 파일"), 또한 썸네일 클래스

DEMO

출처

2014-11-25 07:28:19 Balachandran

그게 그럴 수 없어 !! 나는 이것을 이해할 수있는 다른 방법이 있는지 알고 싶다. 대답 해줘서 고마워! – catastropic

파일 변경 이벤트에 축소 이미지를 표시 할 수 있습니다.

$(document).ready(function(){ 
$('input[type="file"]').change(function() { 
    $(".fileinput-preview.thumbnail").show(); 
}); 
});

출처

2014-11-25 07:37:31 anpsmn

또 다른 훌륭한 대답입니다. 이것 역시 효과가 있었다 !! 감사..:) – catastropic

Bala and anspsmn은 분명히 다음과 같이 말했습니다 : 'onchange'이벤트를 처리하십시오. 그 대답 귀하의 질문. 하지만 Jquery 플러그인이 당신이하는 일을하는 더 간단한 옵션으로 보일 수도 있습니다. 난 당신의 현재 요구에 쉽게 사용자 정의 할 수있는 Jquery 플러그인을 개발했습니다. 이미지 (또는 다른 파일 형식)를 선택하고 미리보고 자르고 (원하는 경우 자르기) 쉽게 업로드 할 수 있습니다. 또한 파일에 최대 KB를 설정하고 파일을 끌어다 놓을 수 있으며 스타일 버튼도 설정할 수 있습니다. 여기

예 : 여기

$('#your-input-file').customFile({ 
    type : 'image', 
    maxKBperFile : 500, 
    maxFiles : 1 
});

다운로드 링크 및 문서를 찾을 수 있습니다 : Jquery Custom Input File

출처

2014-11-25 21:34:17 Angel

이미지를 선택할 때 미리보기 div 표시

답변

관련 문제