Javascript jquery.filer编辑模式动态文件添加_Javascript_Jquery_Jquery Filer

Javascript jquery.filer编辑模式动态文件添加

javascript jquery

Javascript jquery.filer编辑模式动态文件添加,javascript,jquery,jquery-filer,Javascript,Jquery,Jquery Filer,我在编辑部分使用jquery.filer上传文件，以获取保存的图像，它们在文档中有文件：。准备好了功能添加上传的文件进行编辑我可以手动添加这些文件，设置如下数组，但问题是通过for循环动态添加它们 files: [ { name: image1, size: 5453, type: "image/jpg", file: "uploads/"+image1 },

我在编辑部分使用jquery.filer上传文件，以获取保存的图像，它们在

文档中有文件：
。准备好了

功能添加上传的文件进行编辑我可以手动添加这些文件，设置如下数组，但问题是通过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."
                }
            }
        });

    });

$（文档）.ready（函数（）{
var image1=document.getElementById（'image1'）。值；
var image2=document.getElementById（'image2'）。值；
var image3=document.getElementById（'image3'）。值；
var image4=document.getElementById（'image4'）。值；
var image5=document.getElementById（'image5'）。值；
var image6=document.getElementById（'image6'）。值；
var image7=document.getElementById（'image7'）。值；
var image8=document.getElementById（'image8'）。值；
var image9=document.getElementById（'image9'）。值；
var image10=document.getElementById（'image10'）。值；
//例2
$（“#文件管理器_输入2”）。文件管理器({
限额：10，
最大尺寸：2，
扩展名：['jpg'，'jpeg'，'png'，'gif']，
changeInput:'将文件拖放到此处或浏览文件'，
秀拇指：没错，
主题：“dragdropbox”，
模板：{
框：“”，
项目：'\
\
\
\
\
\
{{fi name | limito:25}}\
{{fi-size2}}\
\
{{fi image}}\
\
\
\
{{fi progressBar}}\
\
\
\
\
\
\
\
'，
itemAppend:“\
\
\
\
\
\
这就是答案，我希望能对你有所帮助
<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>


函数img（）{
var图像=[]；
var inp=$（“#imagesOfAd”）.val（）；
inp=inp.split（'，'）；
var url=''；
$。每个（inp，函数（键，值）{
inp='{“name”：“'+value+”，“size”：5453，“type”：“image/jpg”，“file”：“'+url+'uploads/'+value+'”}”；
imag=$.parseJSON（inp）；
图像推送（imag）；
});
$。每个（图像、函数（键、值）{
图像。推送（值）；
});
返回图像；
}
$（文档）.ready（函数（）{
$（'#文件管理器\输入2'）。文件管理器({
限制：空，
maxSize:null，
扩展名：null，
changeInput:'将文件拖放到此处或浏览文件'，
秀拇指：没错，
主题：“dragdropbox”，
模板：{
框：“”，
项目：'\
\
\
\
\
\
{{fi name | limito:25}}\
{{fi-size2}}\
\
{{fi image}}\
\
\
\
\
\
\
\
\
\
'，
itemAppend:“\
\
\
\
\
\
{{fi name | limito:25}}\
{{fi-size2}}\
\
{{fi image}}\
\
\
\
{{fi icon}}\
\
\
\
\
\
\
\
'，
itemAppendToEnd:false，
Remove确认：正确，
_选择器：{
列表：'.jFiler项目列表'，
项目：'.jFiler项目'，
删除：'.jFiler项垃圾操作'
}
},
艾德莫尔：没错，
文件：img（）
});
});
我已经做了类似的事情，通过帮助穆罕默德·扎基斯回答这个问题
而不是这个
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;
    }

这很好，但我有一个问题，我在php中有10个隐藏值，我如何进入img方法那些10个图像值var inp=$（“#imagesOfAd”）.val（）；在这里，你只得到一个值，不是吗？很抱歉，迟到了，有一个隐藏输入（“#imagesOfAd”），其中包含所有图像的名称