gpt4 book ai didi

php - Krajee bootstrap 如何预览和删除图片?

转载 作者:塔克拉玛干 更新时间:2023-11-03 05:49:18 25 4
gpt4 key购买 nike

这里是初始化文件输入的设置。我已经成功上传文件,但我想编辑而不是在 krajee bootstrap 输入的容器中预览图像。如果有人知道,请提供完整的代码以进行删除和预览。

 $("#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>';


});

最佳答案

不太清楚你在找什么,但我认为是这样的......

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

关于php - Krajee bootstrap 如何预览和删除图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43068916/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com