jquery로 선택한 그림을 미리 보는 방법?

여러 파일 입력에서 선택한 사진의 src를 가져 오는 방법은 무엇입니까?jquery로 선택한 그림을 미리 보는 방법?

이것은 설계 목적을 위해 lorempicsum을 사용, 내 실제 코드 :

$('#multiple-files').on('change', function() { 
    console.log(this.files); // I get all my files properly. 

    for (var i = 0; i < this.files.length; i++) { 
     var image_path = 'http://lorempicsum.com/futurama/460/460/' + (i+1); 
     $('#files').append('<img src="'+ image_path +'" class="img-rounded img-responsive">') 
    } 
});

을 그리고 이것은 내 양식입니다 : 사전에

<form method="POST" action="http://localhost:8000/upload" accept-charset="UTF-8" id="upload-image" enctype="multipart/form-data"> 
    <div id="browse" class="btn btn-primary btn-lg btn-block"> 
     <span class="glyphicon glyphicon-picture"></span> Select pictures 
    </div> 

    <input multiple="multiple" id="multiple-files" accept="image/*" name="file[]" type="file"> 

    <div id="files"> 

    </div> 

    <div style="display: none;" class="row" id="form-buttons"> 
     <div class="col-xs-6"> 
      <input class="btn btn-warning btn-lg btn-block" id="reset" value="Reset" type="reset"> 
     </div> 
     <div class="col-xs-6"> 
      <input class="btn btn-success btn-lg btn-block" value="Upload" type="submit"> 
     </div> 
    </div> 
</form>

감사합니다. 여기에 편집

는 스크린 샷입니다 : http://i.imgur.com/8Dy4ZAp.png

출처

2014-04-20 user3551444

또한 –

내 질문을 편집 한 제공하십시오 HTML. – user3551444

가짜 경로명을 사용하여 직접 이미지를 포함 할 수 없으므로 fileReader를 사용하고 base64로 변환 한 다음이를 사용해야합니다. – adeneo

그냥 반복하고 base64로 변환 바이올린을 시도, 다음 이미지 태그

$('#multiple-files').on('change', function (e) { 
    $.each(e.target.files, function(_, file) { 
     var reader = new FileReader(); 

     reader.onload = function (ev) { 
      var img = $('<img />', {src : ev.target.result}); 
      $('#files').append(img); 
     } 

     reader.readAsDataURL(file); 
    }); 
});

를 삽입

FIDDLE

출처

2014-04-20 14:48:25 adeneo

고마워요! 그것은 작동합니다! 정말 끝내주는 군. – user3551444

을 사용하여 파일 리더

당신은 코드

<body> 
<form id="form1" runat="server"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" src="#" alt="your image" /> 
</form> 

<script type='text/javascript'> 
function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
});</script> 
</body>

,536 다음과 같은 아름다운 여기에 대답 Preview an image before it is uploaded

사용을 얻을 수 있습니다

는 http://jsfiddle.net/LvsYc/

출처

2014-04-20 14:10:28

이 스크립트를 광산과 결합하는 방법은 무엇입니까? img 요소에 파일 []의 각 파일에 대한 올바른 DataURL을 추가해야합니다. – user3551444

여러 개의 이미지를 추가 하시겠습니까? –

예 [files]의 각 그림에 대해 #files div 안에 img 요소를 추가해야합니다. – user3551444

jquery로 선택한 그림을 미리 보는 방법?

답변

관련 문제