Krajee önyüklemede görüntüler nasıl önizlenir ve silinir?

Question

Dosya girişini başlatmak için ayar aşağıdadır. Yükleme dosyasını başarıyla tamamladım, ancak krajee önyükleme girdisi kapsayıcısında görüntüleri önizleyemediğimden düzenlemek istiyorum. Lütfen herhangi bir kişinin silip önizleme yapması için gereken kodu vermesi durumunda.

$("#userfiles").fileinput({ 
       'dropZoneEnabled': true, 
       'maxFileCount': totalcount, 
       'showUpload': false, 
       'browseLabel': "Click Here or Drag & Drop Images Here", 
       'browseIcon': "<i class=\"glyphicon glyphicon-picture\"></i> ", 
       'validateInitialCount': true, 
       'allowedFileExtensions': ["jpg", "png", "gif", "jpeg"], 
       'showCaption': true, 
       'showPreview': true, 
       'showRemove': true 
}); 

//This is the ajax for get images from database 

$.ajax({ 
type: "POST", 
url: site_url+'posting/getpicdata', 
data: {pid: url}, 
dataType: "json", 
success: function(response) 
    { 
     //console.log(response); 
     //var result = JSON.parse(response); 

    $.each(response, function(k, v) { 
     //display the key and value pair 
     //console.log(v.url); 
     image_html = v.imgname; 
    appendHTML +='<div data-template="image" data-fileindex="0" id="'+v.imgname+'" class="file-preview-frame krajee-default file-preview-initial file-sortable kv-preview-thumb">'; 
     appendHTML +='<div class="kv-file-content">'; 
     appendHTML +='<img style="width:auto;height:160px;"" alt="'+v.imgname+'" title="'+v.imgname+'" class="kv-preview-data file-preview-image" src="'+v.url+'">'; 
     appendHTML +='</div>'; 
     appendHTML +='<div class="file-thumbnail-footer">'; 
     appendHTML +='<div title="'+v.imgname+'" class="file-footer-caption">'+v.imgname+' <br></div>'; 
     appendHTML +='<div class="file-thumb-progress hide">'; 
     appendHTML +='<div class="progress">'; 
     appendHTML +='<div style="width:0%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-success progress-bar-striped active">0%</div>'; 
     appendHTML +='</div>'; 
     appendHTML +='</div>'; 
     appendHTML +='<div class="file-actions">'; 
     appendHTML +='<div class="file-footer-buttons">'; 
     appendHTML +='<button title="Remove file" data-id="'+v.imgname+'" class="kv-file-remove btn btn-xs btn-default" type="button"><i class="glyphicon glyphicon-trash text-danger"></i></button>'; 
     appendHTML +='</div>'; 
     appendHTML +='<div title="Not uploaded yet" class="file-upload-indicator"><i class="glyphicon glyphicon-hand-down text-warning"></i></div>'; 
     appendHTML +='<div class="clearfix"></div>'; 
     appendHTML +='</div>'; 
     appendHTML +='</div>'; 
     appendHTML +='</div>'; 


    }); 

Answer 1

Size aradığınızı tamamen net değil, ama böyle bir şey olduğunu düşünüyorum ...

<!-- PREVIEW DATA --> 
<!-- load the JS files in the right order --> 
<!-- sortable plugin for sorting/rearranging initial preview --> 
<script src="/path/to/js/plugins/sortable.min.js"></script> 
<!-- purify plugin for safe rendering HTML content in preview --> 
<script src="/path/to/js/plugins/purify.min.js"></script> 
<script src="/path/to/js/fileinput.js"></script> 

<script> 
$("#userfiles").fileinput({ 
      'dropZoneEnabled': true, 
      'maxFileCount': totalcount, 
      'showUpload': false, 
      'browseLabel': "Click Here or Drag & Drop Images Here", 
      'browseIcon': "<i class=\"glyphicon glyphicon-picture\"></i> ", 
      'validateInitialCount': true, 
      'allowedFileExtensions': ["jpg", "png", "gif", "jpeg"], 
      'showCaption': true, 
      'showPreview': true, 
      'showRemove': true, 
    uploadUrl: "/file-upload-batch/1", 
    uploadAsync: false, 
    minFileCount: 2, 
    maxFileCount: 5, 
    overwriteInitial: false, 
    initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup 
    initialPreviewFileType: 'image' // image is the default and can be overridden in initialPreviewConfig. see the docs (http://plugins.krajee.com/file-preview-management-demo) 
}).on('filesorted', function(e, params) { 
    console.log('File sorted params', params); 
}).on('fileuploaded', function(e, params) { 
    console.log('File uploaded params', params); 
}); 
</script>