Question

在我的页面中，我有一个加载了ajax的内容。内容是动态的，包含通过我的自定义ajaxupload插件上传文件的按钮。我使用委托方法，因为是一个ajax内容，但我有一个问题，将一个变量传递给我的ajax插件。事实上，当我尝试获取ID时，这将返回undefined

ids : $('ul.active').attr('ids') <-- undefined

我的情景

HTML

<div id="load-ajax"></div><!-- ajax load content -->
<input type="file" id="inputUpload" style="display:none" /><!-- for upload file -->

load.php - 加载Ajax的动态内容按钮

    <div class=\"btn-group\">
        <button type=\"button\" class=\"btn btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\">
            <span class=\"glyphicon glyphicon-paperclip\"></span>
        </button>
        <ul class=\"dropdown-menu\" role=\"menu\" ids=\"1\" >
            <li><a href=\"\" class=\"upload \">Upload</a></li>
            <li><a href=\"\" class=\"edit\">Edit</a></li>
        </ul>
    </div>
    <div class=\"btn-group\">
        <button type=\"button\" class=\"btn btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\">
            <span class=\"glyphicon glyphicon-paperclip\"></span>
        </button>
        <ul class=\"dropdown-menu\" role=\"menu\" ids=\"4\" >
            <li><a href=\"\" class=\"upload \">Upload</a></li>
            <li><a href=\"\" class=\"edit\">Edit</a></li>
        </ul>
    </div>
    <div class=\"btn-group\">
        <button type=\"button\" class=\"btn btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\">
            <span class=\"glyphicon glyphicon-paperclip\"></span>
        </button>
        <ul class=\"dropdown-menu\" role=\"menu\" ids=\"3\" >
            <li><a href=\"\" class=\"upload \">Upload</a></li>
            <li><a href=\"\" class=\"edit\">Edit</a></li>
        </ul>
    </div>

JS

// First call
loadPage();

function loadPage() {
    $.ajax({
        type: "POST",
        url: load.php,
        dataType: 'html',
        success: function(data) {
            $('#load-ajax').html(data);
        },
        complete: function() {
            //callAjaxUpload();
        }
    });
}

$('#load-ajax).on('click', '.upload', function(e) {
    e.preventDefault();
    $(e.currentTarget).closest('ul').addClass('active');
    $('#inputUpload').trigger('click');
});

$('#inputUpload').ajaxUpload({
    allowed_types   : ['pdf', 'jpeg', 'jpg', 'bmp'],
    extra_fields : { ids : $('ul.active').attr('ids') }, <-- undefined
    onFinish : function() { 
       console.log($('ul.active').attr('ids')); <-- return the right ids value 
       loadPage(); 
    }
});

CUSTOM AJAX UPLOAD PLUGIN

;(function ($, window, document, undefined) {

    // Function-level strict mode syntax
    'use strict';

    $.fn.ajaxUpload = function(options) {

        var defaults = {
            num_files       : 0,
            max_files       : 18,
            max_concurrent  : 10,
            max_filesize    : 1024 * 4096,
            php_max_size    : 1024 * 8192,
            allowed_types   : ['jpeg','jpg'],
            ajax_url        : 'ajax-php/action.php',
            var_name        : 'file',
            extra_fields    : {},
            onFinish        : function() {}
        };

        var options = $.extend(defaults, options);

        return this.each(function() {

            var $this = $(this);

            $this.on('change', function() {

                var files = $this[0].files;
                var len = files.length;
                var items = 0;
                var diff_files = parseInt(defaults.max_files - defaults.num_files - len);

                if(diff_files < 0) {
                    return false;
                }
                if(!maxUploadFiles(len, defaults.max_concurrent)) {
                    return false;
                }
                var formdata = new FormData();

                jQuery.each(files, function(i, file) {
                    if(!isOverSized(file, defaults.max_filesize)) {
                        return false;
                    }
                    if(!isAllowedTypes(file, defaults.allowed_types)) {
                        return false;
                    }
                    if(!totalFilesSize(file, defaults.php_max_size)) {
                        return false;
                    }

                    formdata.append(defaults.var_name + '['+i+']', file);
                    items++;
                });

                // Append extra data to formdata
                $.each(defaults.extra_fields, function(name, value) {
                    formdata.append(name, value);
                });

                // Check that files have passed all test
                if (len != items) { return false; }

                $.ajax({
                    url: defaults.ajax_url,
                    data: formdata,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    beforeSend: function () {
                    },
                    complete: function () {
                        defaults.onFinish.call(this);
                    },
                    success: function(data) {
                        totalSize = 0;

                        //Reset input data
                        //$this.replaceWith($this.val('').clone(true));
                    }
                });

            });
       });
    };

    var totalSize = 0;

    function totalFilesSize(file, php_max_size) {
        totalSize += file.size;
        if(totalSize > php_max_size) {
            totalSize = 0;
            return false;
        }
        return true;
    }
    function maxUploadFiles(len, max_concurrent) {
        if(len > max_concurrent) {
            return false;
        }
        return true;
    }
    function isAllowedTypes(file, allowed_types) {
        var ext = file.name.split('.').pop().toLowerCase();
        if(jQuery.inArray(ext, allowed_types) < 0) {
            return false;
        }
        return true;
    }
    function isOverSized(file, max_filesize) {
        if(file.size > max_filesize) {
            return false;
        }
        return true;
    }

})(jQuery, window, document);

我必须在我的ajaxUpload插件中修改一些内容吗？我该如何正确地获取变量？谢谢

Answer 1

尝试：$('ul.active').attr('id')。

没有名为“ids”的属性。

编辑：很抱歉，我没有正确阅读您的问题就赶紧回答。

如果你看看这个jsfiddle你可以清楚地看到$（'ul.active'）。attr（'ids'）语句应该有效 https://jsfiddle.net/o3ejzwow/

因此，当没有“活动”类附加到任何“ul”元素时，此语句将返回undefined的唯一原因是。

P.S：我建议您在任何自定义（用户定义）属性之前使用“data-”，并使用.prop而不是.attr发布1.8版本的jquery。

如何从jq插件

1 个答案: