ajax에서 jasny bootstrap 즉시 이미지 미리보기 업로드

Question

Jasny Bootstrap을 선택하면 파일 미리보기가 표시됩니다.

 <div class="fileinput fileinput-new" data-provides="fileinput"> 
     <div> 
     <span class="btn btn-primary btn-file"><span class="fileinput-new"><span class="fa fa-camera"></span> Image 3</span> 
      <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div> 
      <input type="file" name="file" class="ephoto-upload" accept="image/jpeg"></span> 
      </div> 
     </div> 

이미지를 선택하자 마자이 이미지를 ajax를 통해 제출하고 싶습니다. 다음 코드를 사용하고 있습니다.

<script> 
$('.ephoto-upload').change(function(){ 
if($(this).val()!='') { 
var formData = new FormData(); 
formData.append('file', $(this)[0].files[0]); 
$.ajax({ 
    url: '/path/to/upload', 
    type: 'POST', 
    data: formData, 
    async: false, 
    success: function (r) { 
    if(r.success) { 
    //success work 
    } 
    }, 
    cache: false, 
    contentType: false, 
    processData: false 
}); 

} 

}); 
</script> 

업로드는 잘 작동하지만 아약스 업로드가 정지를 얻을 언젠가 페이지에 대한 그 미리보기가 표시된 후 completed.So을 후 이미지의 미리보기가 표시됩니다. 그러나 이미지를 선택하자마자 미리보기를 표시하고 Ajax가 실행됩니다.

Answer 1

아약스 async=false을 설정하면 이미지가 업로드 될 때까지 탐색기가 정지됩니다.

<form> 
    <div class="fileinput fileinput-new" data-provides="fileinput"> 
     <div> 
     <span class="btn btn-primary btn-file"><span class="fileinput-new"><span class="fa fa-camera"></span> Image 3</span> 
      <div id="preview" name="preview" class="fileinput-preview fileinput-exists thumbnail" style="width: 200px; height: 150px; display:block;"></div> 
      <img id="prevImg" name="prevImg" /> 
      <input type="file" name="file" id="file" class="ephoto-upload" accept="image/jpeg"></span> 
      </div> 
     </div> 

</form> 

JS를 : 기본 true 때문에

$('.ephoto-upload').change(function(){ 
    previewURL(this); 
    if($(this).val()!='') { 
     var formData = new FormData(); 
     formData.append('file', $(this)[0].files[0]); 
     $.ajax({ 
     url: '/path/to/upload', 
     type: 'POST', 
     data: formData, 
     success: function (r) { 
     if(r.success) { 
     //success work 
     } 
    }, 
    cache: false, 
    contentType: false, 
    processData: false 
}); 

} 
}); 

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

      reader.onload = function (e) { 
       //$('#prevImg').attr('src', e.target.result); 
       $('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat"); 
      } 

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

내가 async=false을 삭제

는 다른 한편으로 이것은 당신이 원하는 것입니다.

여기에 demo