javascript - 将动态创建的对象传递给函数-6ren

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

转载作者：行者123 更新时间：2023-11-28 01:07:03

25

4

我创建了一个 jQuery UI Accordion 图像加载器，可以动态添加或删除面板。每个面板内都有一个图像输入表单控件，文档末尾有一个函数，可以将面板中的 img src 更改为新选择的图像。不幸的是，我收到:无法读取未定义的"file"。我明白为什么要这样做，我只需要一种方法来动态添加面板并能够为加载图像的面板更新 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]);
    }
}

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

最佳答案

ID 必须是唯一的。

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

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

这个:为了得到图像
image 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>

关于javascript - 将动态创建的对象传递给函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39306717/

25

4

0

文章推荐： html - 影响子项的 div 上的过滤属性

文章推荐： javascript - 将元素定位在点击区域附近

文章推荐： html - CSS 动画跳跃

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

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