即時圖像預覽在jasny bootstrap上ajax上傳

我使用Jasny Bootstrap在選擇時顯示文件預覽。即時圖像預覽在jasny bootstrap上ajax上傳

 <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得到執行。

來源

2014-07-23 programmer

你正在設置你的ajax async=false，這意味着導航將freez直到圖片上傳。

在另一方面，這是你想要的東西：

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

$('.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因爲默認是true。

這是demo

來源

2014-07-23 10:50:04

即時圖像預覽在jasny bootstrap上ajax上傳

回答

相關問題