2

我制作了一个用户控件，允许上传图像然后裁剪，但是当我在一个表单上有几个这样的控件时，只有最后一个添加的控件才能正常工作。问题是函数 storeCoords，对 X、Y、W 和 H 隐藏字段没有影响，因此当作物“橡皮筋”移动时，这些值不会改变。添加最终控件后，随着“橡皮筋”的移动，隐藏字段也会更新，然后一切都会按预期工作。为什么当我在一个页面上有几个这样的控件时，只有最后一个的 javascript 按预期工作。

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script>
<link href="/Controls/ImageUploadAndCrop/CSS/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(window).on('load', function ()
    {

        var elem = $('#<%= CropImage.ClientID %>'),
            boxWidth = elem.width(),
            boxHeight = elem.height();

        elem.Jcrop({
            onSelect: storeCoords,
            boxWidth: boxWidth,
            boxHeight: boxHeight
        });

        $('#<%=CropButton.ClientID%>').click
        (
            function ()
            {
                var cropImg = $('.jcrop-holder img');

                $('#<%= ImgWidth.ClientID %>').val(cropImg.width());
                $('#<%= ImgHeight.ClientID %>').val(cropImg.height());
            }
        );
    });

        function storeCoords(c)
        {
            $('#<%= X.ClientID %>').val(c.x);
            $('#<%= Y.ClientID %>').val(c.y);
            $('#<%= W.ClientID %>').val(c.w);
            $('#<%= H.ClientID %>').val(c.h);
        }
 </script>
<div>
    <asp:Panel ID="UploadPanel" runat="server">
        <asp:FileUpload ID="Upload" runat="server" />
        <br />
        <asp:Button ID="UploadButton" runat="server" OnClick="UploadButton_Click" Text="Upload" />
        <asp:Label ID="ErrorLabel" runat="server" Visible="false" />
    </asp:Panel>
    <asp:Panel ID="CropPanel" runat="server" Visible="false">
        <asp:Image ID="CropImage" runat="server"/>
        <br />
        <asp:HiddenField ID="X" runat="server" />
        <asp:HiddenField ID="Y" runat="server" />
        <asp:HiddenField ID="W" runat="server" />
        <asp:HiddenField ID="H" runat="server" />
        <asp:HiddenField ID="ImgWidth" runat="server"/>
        <asp:HiddenField ID="ImgHeight" runat="server"/>
        <asp:Button ID="CropButton" runat="server" Text="Crop" OnClick="CropButton_Click" />
    </asp:Panel>
    <asp:Panel ID="CroppedPanel" runat="server" Visible="false">
        <asp:Image ID="CroppedImage" runat="server" />
    </asp:Panel>
</div>
4

1 回答 1

2

我发现这个控件有几个问题：

1.

 var elem = $('#<%= CropImage.ClientID %>'),
            boxWidth = elem.width(),
            boxHeight = elem.height();

这些行不应该跟一个分号“;” 而不是逗号？但也许是一个错字。

2.

因为您在页面的多个位置使用此控件，所以您需要注意任何 JavaScript 代码的“重复”外观：

例如，<script>每次将控件添加到页面时，都会出现以下标记。

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script>

然而，这不会对功能造成任何不利影响（我认为？！），但下面的函数肯定会这样做，因为 JavaScript 将拥有更多具有相同参数的相同函数的副本。考虑哪一个？

function storeCoords(c)
        {
            $('#<%= X.ClientID %>').val(c.x);
            $('#<%= Y.ClientID %>').val(c.y);
            $('#<%= W.ClientID %>').val(c.w);
            $('#<%= H.ClientID %>').val(c.h);
        }

一个快速的解决方法是：

 elem.Jcrop({
            onSelect: storeCoords<%= CropImage.ClientID %>,
            boxWidth: boxWidth,
            boxHeight: boxHeight
        });

和

function storeCoords<%= CropImage.ClientID %>(c) { ... }

这样，您将拥有唯一的函数名称。

然而，ASP .Net 具有处理使用 JavaScript 的用户控件的机制。请参阅客户端脚本管理器

于 2012-07-04T15:33:55.057 回答