jquery.filer 编辑模式动态文件添加
Posted
技术标签:
【中文标题】jquery.filer 编辑模式动态文件添加【英文标题】：jquery.filer Edit mode dynamic file adding 【发布时间】：2016-07-22 23:34:18 【问题描述】：我使用 jquery.filer https://github.com/CreativeDream/jQuery.filer 在编辑部分上传文件以获取他们在document.ready 函数中拥有file: 的保存图像来添加上传的文件进行编辑我可以手动添加这些文件设置如下数组但问题正在通过 for 循环动态添加它们
files: [
name: image1,
size: 5453,
type: "image/jpg",
file: "uploads/"+image1
,
name: image2,
size: 5453,
type: "image/jpg",
file: "uploads/"+image2
,
name: image3,
size: 5453,
type: "image/jpg",
file: "uploads/"+image3
,
name: image4,
size: 5453,
type: "image/jpg",
file: "uploads/"+image4
,
name: image5,
size: 5453,
type: "image/jpg",
file: "uploads/"+image5
],
我试图在里面做函数。但这也行不通
files:function ()
var returnedObject = [
name: image1,
size: 5453,
type: "image/jpg",
file: "uploads/"+image1
];
return returnedObject;
完整代码：
$(document).ready(function ()
var image1 = document.getElementById('image1').value;
var image2 = document.getElementById('image2').value;
var image3 = document.getElementById('image3').value;
var image4 = document.getElementById('image4').value;
var image5 = document.getElementById('image5').value;
var image6 = document.getElementById('image6').value;
var image7 = document.getElementById('image7').value;
var image8 = document.getElementById('image8').value;
var image9 = document.getElementById('image9').value;
var image10 = document.getElementById('image10').value;
//Example 2
$("#filer_input2").filer(
limit: 10,
maxSize: 2,
extensions: ['jpg', 'jpeg', 'png', 'gif'],
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates:
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="fi-name">fi-name | limitTo: 25</b></span>\
<span class="jFiler-item-others">fi-size2</span>\
</div>\
fi-image\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>fi-progressBar</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<input type=\"hidden\" name=\"images[]\" value="fi-name"\">\n\
<span class="jFiler-item-title"><b title="fi-name">fi-name | limitTo: 25</b></span>\
<span class="jFiler-item-others">fi-size2</span>\
</div>\
fi-image\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">fi-icon</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors:
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
,
dragDrop:
dragEnter: null,
dragLeave: null,
drop: null,
,
uploadFile:
url: "./php/upload.php",
data: null,
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function ()
,
success: function (data, itemEl, listEl, boxEl, newInputEl, inputEl, id)
var new_file_name = JSON.parse(data),
filerKit = inputEl.prop("jFiler");
filerKit.files_list[id].name = new_file_name;
//filerKit.files_list[id].file.name = new_file_name; <-- false
var parent = itemEl.find(".jFiler-jProgressBar").parent();
itemEl.find(".jFiler-jProgressBar").fadeOut("slow", function ()
$(" <input type=\"hidden\" name=\"images[]\" value=\"" + new_file_name + "\"> <div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
);
,
error: function (el)
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function ()
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
);
,
statusCode: null,
onProgress: null,
onComplete: null
,
files:function ()
var returnedObject = [
name: image1,
size: 5453,
type: "image/jpg",
file: "uploads/"+image1
];
return returnedObject;
,
addMore: false,
clipBoardPaste: true,
excludeName: 'jfiler-items-exclude-AA-1',
beforeRender: null,
afterRender: null,
beforeShow: null,
beforeSelect: null,
onSelect: null,
afterShow: null,
onRemove: function (itemEl, file, id, listEl, boxEl, newInputEl, inputEl)
var filerKit = inputEl.prop("jFiler"),
file_name = filerKit.files_list[id].name;
$.post('./php/remove_file.php', file: file_name);
,
onEmpty: null,
options: null,
captions:
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors:
filesLimit: "Only fi-limit files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "fi-name is too large! Please upload file up to fi-maxSize MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to fi-maxSize MB."
);
);
【问题讨论】：
【参考方案1】：我通过 Mohamed zakis 的回答做了类似的事情来解决这个问题
而不是这个
files: [
name: image1,
size: 5453,
type: "image/jpg",
file: "uploads/"+image1
]
我正在使用
files: img()
方法是这样的：
function img()
var images = [];
var inp = [];
var image1 = document.getElementById('image1').value;
var image2 = document.getElementById('image2').value;
var image3 = document.getElementById('image3').value;
var image4 = document.getElementById('image4').value;
var image5 = document.getElementById('image5').value;
var image6 = document.getElementById('image6').value;
var image7 = document.getElementById('image7').value;
var image8 = document.getElementById('image8').value;
var image9 = document.getElementById('image9').value;
var image10 = document.getElementById('image10').value;
if (image10 != '')
inp.push(image10);
if (image9 != '')
inp.push(image9);
if (image8 != '')
inp.push(image8);
if (image7 != '')
inp.push(image7);
if (image6 != '')
inp.push(image6);
if (image5 != '')
inp.push(image5);
if (image4 != '')
inp.push(image4);
if (image3 != '')
inp.push(image3);
if (image2 != '')
inp.push(image2);
if (image1 != '')
inp.push(image1);
$.each(inp, function (key, value)
inp = '"name": "' + value + '","size": 5453,"type": "image/jpg","file": "uploads/' + value + '"';
imag = $.parseJSON(inp);
images.push(imag);
);
return images;
【讨论】：
【参考方案2】：这就是答案，希望对你有所帮助。
<script>
function img()
var images =[];
var inp = $("#imagesOfAd").val();
inp = inp.split(',');
var url= '<?php echo site_url(); ?>';
$.each( inp, function( key, value )
inp='"name": "'+value+'","size": 5453,"type": "image/jpg","file": "'+url+'uploads/'+value+'"';
imag = $.parseJSON(inp);
images.push(imag);
);
$.each( images, function( key, value )
images.push(value);
);
return images;
$(document).ready(function ()
$('#filer_input2').filer(
limit: null,
maxSize: null,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates:
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="fi-name">fi-name | limitTo: 25</b></span>\
<span class="jFiler-item-others">fi-size2</span>\
</div>\
fi-image\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left"></ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="fi-name">fi-name | limitTo: 25</b></span>\
<span class="jFiler-item-others">fi-size2</span>\
</div>\
fi-image\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">fi-icon</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors:
list: '.jFiler-items-list',
item: '.jFiler-item',
remove: '.jFiler-item-trash-action'
,
addMore: true,
files: img()
);
);
</script>
【讨论】：
这很好，但我有问题我在 php 中有 10 个隐藏值我如何进入那个 img 方法这 10 个图像值 var inp = $("#imagesOfAd").val();在这里你只得到一个值不是吗？ 抱歉迟到了，有一个隐藏的输入（“#imagesOfAd”），其中包含所有图像名称。 我有 10 张图片要获取，但只有一张。在编辑它显示相同的名称两次。我没有得到那部分 你可以添加隐藏的输入以便我理解以上是关于jquery.filer 编辑模式动态文件添加的主要内容，如果未能解决你的问题，请参考以下文章