将动态创建的对象传递给函数

时间：2016-09-03 12:08:17

标签： javascript jquery html jquery-ui accordion

我创建了一个动态添加或删除面板的jQuery UI Accordion图像加载器。每个面板内部是一个图像输入表单控件，在文档的末尾是一个函数，可以将面板中的img src更改为新选择的图像。不幸的是，我得到了：cannot read 'files' of undefined。我理解为什么这样做，我只需要一种动态添加面板的方法，并且能够为加载图像的面板更新img src。

到目前为止，我的代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- css links -->
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
    <!-- /css links -->
    <!-- js files  -->
    <script src="/Scripts/jquery-3.1.0.js"></script>
    <script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
    <!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
    <script lang="en" type="text/javascript">
        $(function () {
            $("#PrimaryImageAccordion").accordion({
                collapsible: true
            });
        });
    </script>
    <br /><br />
    <button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
    <div id="PrimaryImageAccordion">
        <h4 class="PrimaryImageTitle">Primary Image</h4>
        <div>
            <div class="row form-group">
                <label for="ImageSelector" class="control-label col-md-2">Project Image</label>
                <div class="col-md-10">
                    <input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
                    <img id="Image" src="#" style="width: 100px; visibility: hidden;" />
                </div>
            </div>
        </div>
    </div>
    <script lang="en" type="text/javascript">
        function btnAddPrimaryImage_Click() {
            var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
            template += "<div class='AccordionPanel'><div class='row form-group'>\n";
            template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
            template += "<div class='col-md-10'>\n";
            template += "<input type='file' id='Image1Selector' /><br />\n";
            template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
            template += "</div></div></div>\n";

            $("#PrimaryImageAccordion").append(template);

            $("#PrimaryImageAccordion").accordion("refresh");
        }

        function removePanel(a) {
            $(a).parent().next().remove();
            $(a).parent().remove();
            $("#PrimaryImageAccordion").accordion("refresh");
            return false;
        }

        function ImageSelector_Change(object, input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    object.attr("src", e.target.result);
                    object.css("visibility", "visible");
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>

</html>

更新1

更改了我的主选择器/加载器功能，如下所示：

function ImageSelector_Change(input) {
    var object = $(input).parent().find('img#Image');

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            object.attr("src", e.target.result);
            object.css("visibility", "visible");
        }

        reader.readAsDataURL(input.files[0]);
    }
}

唯一的问题是它只加载第一张图片，而不是加载其他图片

3 个答案:

答案 0 :(得分：1)

ID必须是唯一的。

所以在函数 btnAddPrimaryImage_Click 中，我更正了如何使用增量变量将新元素添加到手风琴中。

函数 ImageSelector_Change 需要获取两个参数：

  • 这个：为了获得图像
  • 图片ID放置加载图片的位置。

此外，因为您使用的是bootstrap，我建议您避免使用jQuery 3.x来解决兼容性问题。

摘录：

$(function () {
  $("#PrimaryImageAccordion").accordion({
    collapsible: true
  });
});

 var idCounter = 0;
    function btnAddPrimaryImage_Click() {
        idCounter++;
        var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
        template += "<div class='AccordionPanel'><div class='row form-group'>\n";
        template += "<label for='ImageSelector'" + idCounter + " class='control-label col-md-2'>Project Image</label>\n";
        template += "<div class='col-md-10'>\n";
        template += "<input type='file' id='ImageSelector" + idCounter + "' onchange='ImageSelector_Change(this,\"Image" + idCounter + "\");' /><br />\n";
        template += "<img id='Image" + idCounter + "' src='#' style='width: 100px; visibility: hidden;' />\n";
        template += "</div></div></div>\n";

        $("#PrimaryImageAccordion").append(template);

        $("#PrimaryImageAccordion").accordion("refresh");
    }

    function removePanel(a) {
        $(a).parent().next().remove();
        $(a).parent().remove();
        $("#PrimaryImageAccordion").accordion("refresh");
        return false;
    }

    function ImageSelector_Change(object, input) {
        if (object.files && object.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById(input).src = e.target.result;
                document.getElementById(input).style.visibility = "visible";
            }

            reader.readAsDataURL(object.files[0]);
        }
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
    <h4 class="PrimaryImageTitle">Primary Image</h4>
    <div>
        <div class="row form-group">
            <label for="ImageSelector" class="control-label col-md-2">Project Image</label>
            <div class="col-md-10">
                <input type="file" id="ImageSelector" onchange="ImageSelector_Change(this, 'Image');" /><br />
                <img id="Image" src="#" style="width: 100px; visibility: hidden;" />
            </div>
        </div>
    </div>
</div>

答案 1 :(得分：0)

我认为你必须像这样单独更改这个函数参数。 因为您的onchange事件使用单个参数触发此函数。 因此，它会收到object，但您尝试访问input值undefined 这里采用一个全局变量增量，因为您多次点击按钮那么多次DOM图像元素具有samaID 

var vrImgeID=0;
 function btnAddPrimaryImage_Click() {
   var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
   template += "<div class='AccordionPanel'><div class='row form-group'>\n";
   template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
   template += "<div class='col-md-10'>\n";
   template += "<input type='file' id='Image1Selector' /><br />\n";
   template += "<img id='Image"+vrImgeID+"' src='#' style='width: 100px; visibility: hidden;' />\n";
   template += "</div></div></div>\n";

   $("#PrimaryImageAccordion").append(template);
   vrImgeID++;

   $("#PrimaryImageAccordion").accordion("refresh");
 }



function ImageSelector_Change(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    input.attr("src", e.target.result);
                    input.css("visibility", "visible");
                }

            reader.readAsDataURL(input.files[0]);
        }
    }

答案 2 :(得分：0)

我完成的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- css links -->
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
    <!-- /css links -->
    <!-- js files  -->
    <script src="/Scripts/jquery-3.1.0.js"></script>
    <script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
    <!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
    <script lang="en" type="text/javascript">
        $(function () {
            $("#PrimaryImageAccordion").accordion({
                collapsible: true
            });
        });
    </script>
    <br /><br />
    <button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
    <div id="PrimaryImageAccordion">
        <h4 class="PrimaryImageTitle">Primary Image</h4>
        <div>
            <div class="row form-group">
                <label for="ImageSelector" class="control-label col-md-2">Project Image</label>
                <div class="col-md-10">
                    <input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
                    <img id="Image" src="#" style="width: 100px; visibility: hidden;" />
                </div>
            </div>
        </div>
    </div>
    <script lang="en" type="text/javascript">
        function btnAddPrimaryImage_Click() {
            var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
            template += "<div class='AccordionPanel'><div class='row form-group'>\n";
            template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
            template += "<div class='col-md-10'>\n";
            template += "<input type='file' id='ImageSelector' onchange='ImageSelector_Change(this);' /><br />\n";
            template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
            template += "</div></div></div>\n";

            $("#PrimaryImageAccordion").append(template);

            $("#PrimaryImageAccordion").accordion("refresh");
        }

        function removePanel(a) {
            $(a).parent().next().remove();
            $(a).parent().remove();
            $("#PrimaryImageAccordion").accordion("refresh");
            return false;
        }

        function ImageSelector_Change(input) {
            var object = $(input).parent().find('img#Image');

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    object.attr("src", e.target.result);
                    object.css("visibility", "visible");
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>

</html>

找到了将代码添加到第一个对象（手风琴面板）的困难方法，您还必须向模板添加相同的代码才能使图像加载器正常工作：p。

相关问题
最新问题