Iasediate Image preview in jasny bootstrap on ajax loading

Question

Seçildiğinde dosya önizleme görüntülemek için Jasny Bootstrap kullanıyorum.

 <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> 

Resim seçildiğinde, bu görüntünün ajax yoluyla gönderilmesini başlatmak istiyorum. Aşağıdaki kodu kullanıyorum.

<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> 

yükle çalışıyor ancak ajax yükleme donuyor olsun bazen sayfası için ve bu önizleme gösterildikten sonra completed.So sonra görüntünün önizlemesi görüntülenir. Ama önizlemeyi görüntü seçilir seçilmez ve seçilen görüntüyü görüntüledikten sonra görüntülemek istiyorum, Ajax çalıştır.

Answer 1

ajax async=false ayarını yapıyorsunuz, bu da görüntü yüklenene kadar navigatörün donacağı anlamına geliyor.

<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: default true çünkü

$('.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]); 
     } 
    } 

Ben async=false silinen

Öte yandan ise istediğinin bu olduğunu.

İşte şu anda demo