Here is the setting of the initialize the file input. I have successfully done upload file but i want to edit than i cant preview images in the container of krajee bootstrap input. Please if anyone know give the full code to delete and 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 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>'; }); 2 Answers
Answers 1
Your question is not clear But I'm suppose that what you are looking how to preview the images in krajee plugin
<script> $("#input-pd").fileinput({ uploadUrl: "/file-upload-batch/1", uploadAsync: false, minFileCount: 2, maxFileCount: 5, overwriteInitial: false, initialPreview: [ // IMAGE DATA "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg", // IMAGE DATA "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg", // VIDEO DATA "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4", // PDF DATA 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf', // TEXT DATA "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.", // HTML DATA '<div class="text-center">' + '<h3>Lorem Ipsum</h3>' + '<p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p>' + '<h5><small>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</small></h5>' + '<hr>' + '</div>' + '<div class="text-justify">' + '<p>' + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis convallis dolor sed dignissim. Phasellus euismod mauris vel dolor maximus, sed fermentum mauris lobortis. Aliquam luctus, diam in luctus egestas, magna lacus luctus libero, scelerisque mattis ante dolor ac nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse varius orci ultricies massa euismod, at semper turpis fermentum. Quisque vitae augue vel lectus viverra facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacinia molestie diam, et volutpat nunc bibendum a. Cras a est sed augue commodo accumsan quis vitae nisi.' + '</p>' + '<p>' + 'Nunc sit amet metus et dui aliquet feugiat. Praesent lobortis, ipsum et elementum dignissim, urna libero fringilla justo, at tincidunt nisi mi sed mi. Integer vel est porttitor, tempor tortor non, lobortis felis. Curabitur porttitor nisi et volutpat iaculis. Fusce nec feugiat lectus, vitae ullamcorper lorem. Ut ultrices nunc imperdiet placerat malesuada. Proin commodo erat in egestas maximus.' + '</p>' ], 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 config below initialPreviewConfig: [ {caption: "Desert.jpg", size: 827000, width: "120px", url: "/file-upload-batch/2", key: 1}, {caption: "Lighthouse.jpg", size: 549000, width: "120px", url: "/file-upload-batch/2", key: 2}, {type: "video", size: 375000, filetype: "video/mp4", caption: "KrajeeSample.mp4", url: "/file-upload-batch/2", key: 3}, {type: "pdf", size: 8000, caption: "About.pdf", url: "/file-upload-batch/2", key: 4}, {type: "text", size: 1430, caption: "LoremIpsum.txt", url: "/file-upload-batch/2", key: 5}, {type: "html", size: 3550, caption: "LoremIpsum.html", url: "/file-upload-batch/2", key: 6} ], purifyHtml: true, // this by default purifies HTML data for preview uploadExtraData: { img_key: "1000", img_keywords: "happy, places", } }).on('filesorted', function(e, params) { console.log('File sorted params', params); }).on('fileuploaded', function(e, params) { console.log('File uploaded params', params); }); </script><!-- 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> <label class="control-label">Select File</label> <input id="input-pd" name="input-pd[]" type="file" multiple class="file-loading">You must install this plugin through composer and add the links in header of your html file then it will work fine see the documentation
Answers 2
It's not totally clear what you are looking for, but I think it's something like this...
<!-- 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> 
0 comments:
Post a Comment