php - How to preview and delete images in Krajee bootstrap? -


here setting of initialize file input. have done upload file want edit cant preview images in container of krajee bootstrap input. please if know give full code delete , preview.

 $("#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 ajax images 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 key , 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>';     }); 

it's not totally clear looking for, think it's this...

 <!-- preview data --> <!-- load js files in right order --> <!-- sortable plugin sorting/rearranging initial preview --> <script src="/path/to/js/plugins/sortable.min.js"></script> <!-- purify plugin 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 sending preview data , not raw markup     initialpreviewfiletype: 'image' // image default , can overridden in initialpreviewconfig. see 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> 

Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -