带有图像预览的文件上传器

Question

我们在表单上有3个带图像预览的图像上传器。 当用户在第一个上传器上传图片时，图像也会显示其他元素。 是否有可能将这3个元素分开以限制提及行为？

以某种方式，每个元素都显示自己的图像。

Answer 1

对于所有3个 PXImageUploader 控件，似乎 AllowNoImage 属性设置为 True 似乎是答案：除非 AllowNoImage 属性设置为 True ，否则 PXImageUploader 将始终显示附加到记录的第一张图片。< / p>

<px:PXLayoutRule runat="server" StartRow="True" LabelsWidth="XS" ControlSize="XM" />
<px:PXImageUploader ID="imgUploader" runat="server" DataField="ImageUrl" 
    AllowUpload="true" ShowComment="true" DataMember="ItemSettings" AllowNoImage="true"
    Height="320px" Width="390px" />
<px:PXLayoutRule runat="server" StartColumn="True" LabelsWidth="XS" ControlSize="XM" />
<px:PXImageUploader ID="imgUploader2" runat="server" DataField="UsrImageUrl2" 
    AllowUpload="true" ShowComment="true" DataMember="ItemSettings" AllowNoImage="true"
    Height="320px" Width="390px" />
<px:PXLayoutRule runat="server" StartColumn="True" LabelsWidth="XS" ControlSize="XM" />
<px:PXImageUploader ID="imgUploader3" runat="server" DataField="UsrImageUrl3" 
    AllowUpload="true" ShowComment="true" DataMember="ItemSettings" AllowNoImage="true" 
    Height="320px" Width="390px" />

为了在 Stock Items 屏幕上显示上面显示的结果，我还为 InventoryItem DAC定义了2个自定义数据库绑定字段（请参阅下面的代码段），并确保指定每个 PXImageUploader 的 DataField 属性的不同DAC字段名称：

public class InventoryItemExt : PXCacheExtension<InventoryItem>
{
    public abstract class usrImageUrl2 : IBqlField { }
    [PXDBString(255)]
    [PXUIField(DisplayName = "Image")]
    public string UsrImageUrl2 { get; set; }

    public abstract class usrImageUrl3 : IBqlField { }
    [PXDBString(255)]
    [PXUIField(DisplayName = "Image")]
    public string UsrImageUrl3 { get; set; }
}

为了隐藏导航按钮（＆＃34; ＆lt; -Ctrl ＆＃34;＆＃34; Ctrl-＆gt ; ＆＃34;）在所有 PXImageUploader 控件中，您应该订阅容纳 PXImageUploader 的容器控件的 Initialize 事件strong>控制：

<px:PXTab ID="tab" runat="server" Width="100%" Height="606px" DataSourceID="ds" DataMember="ItemSettings">
    <ClientEvents Initialize="tabInitialized" />
    <Items>
        ...
    </Items>
</px:PXTab>

并按照以下示例实现JavaScript函数：

function tabInitialized(s, a) {
    var leftArrows = document.getElementsByClassName("imgleft");
    for (var i = 0; i < leftArrows.length; i++) {
        leftArrows[i].style.visibility = "hidden";
    }

    var leftArrows = document.getElementsByClassName("imgright");
    for (var i = 0; i < leftArrows.length; i++) {
        leftArrows[i].style.visibility = "hidden";
    }
}

要将自定义JavaScript代码打包到自定义中，在布局编辑器中，您应该从添加控件标签中拖放 Java Script 元素，并将整个JavaScript代码复制到其中脚本属性。