如何添加一张 Jasny 图片上传以同时添加新图片和编辑图片？

Question

我想使用 jasny 图像上传在 asp.net 网络表单中同时添加新图像和编辑以前的图像。 我有一个隐藏的 div pan 用于添加和编辑新闻，通过按钮点击可见；

这是我的 News.aspx 页面代码：

<div id="AddNewNews" class="col-lg-12" runat="server" visible="false">


        <div class="form-group">
            <div class="col-lg-2">
                <asp:Label ID="lblTitle" runat="server" Text="Title">
                </asp:Label>
            </div>
            <div class="col-lg-10">
                <asp:RequiredFieldValidator ID="ReqValTxtTitle"
                    runat="server" ValidationGroup="group1" EnableClientScript="true"
                    ControlToValidate="txtTitle" ForeColor="Red" Text="*" />
                <asp:TextBox ID="txtTitle" runat="server" CssClass="form-control" MaxLength="100"></asp:TextBox>

            </div>
                            <div class="clr"></div>

        </div>
        <div class="form-group">
            <div class="col-lg-2">
                <asp:Label ID="lblSummary" runat="server" Text="Summary">
                </asp:Label>
            </div>
            <div class="col-lg-10">
                <asp:RequiredFieldValidator ID="ReqValTxtSummary" EnableClientScript="true" ForeColor="Red" runat="server" ValidationGroup="group1"
                    ControlToValidate="txtSummary" Text="*" />
                <asp:TextBox ID="txtSummary"
                    runat="server" onkeypress="return CheckLength();"
                    TextMode="MultiLine" CssClass="form-control"
                    MaxLength="200">
                </asp:TextBox>
            </div>
            <div class="clr"></div>
        </div>

        <div class="form-group">
            <div class="col-lg-2">

                <asp:Label ID="lblDesc" runat="server" Text="Description">
                </asp:Label>
            </div>
            <div class="col-lg-10">

                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                    ValidationGroup="group1" EnableClientScript="true"
                    ControlToValidate="CKEditor1" ForeColor="Red" Text="*" />

                <CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server"></CKEditor:CKEditorControl>

            </div>                <div class="clr"></div>

        </div>
                   <div class="form-group">
            <div class="col-lg-2">
                <asp:Label ID="lblImg" runat="server" Text="Select Picture">
                </asp:Label>
            </div>

            <div class="col-lg-2">

                <div class="fileinput <%=Session["statusNE"]%>" data-provides="fileinput" data-name="NewsImg">
                    <input type="hidden" name="NewsImg" value="1" runat="server" />
                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                        <img src="~/Content/images/200x150.png" alt="No Image">
                    </div>
                    <div class="fileinput-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
                        <img src="#" runat="server" id="NewsImageUrl" />
                    </div>
                    <div style="text-align: center;">
                        <span class="btn btn-default btn-file"><span class="fileinput-new">Select</span>
                            <span class="fileinput-exists">Change</span>
                            <input type="file" name="NewsImg" id="NewsImg" runat="server">
                        </span>
                        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                    </div>
                </div>


            </div>

        </div>

Session["statusNE"] 显示 "fileinput-exists" 或 "fileinput-new"; 但在添加新的新闻模式时，显示 2 个图像框； 我该如何管理它？ 谢谢。

Answer 1

  <div class="controls">
                                                            <div class="thumbnail" style="width: 291px; height: 200px;">
                                                            <asp:Image ID="myimage"  runat="server" Height="200px" />  

                                                            </div>
                                                        </div>
                                                        <div class="space10">
                                                        </div>
                                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                                            <div class="input-append">

                                                                <div class="uneditable-input">
                                                                    <i class="icon-file fileupload-exists"></i><span class="fileupload-preview"></span>
                                                                </div>
                                                                <span class="btn btn-file"><span class="fileupload-new">Select file</span> <span
                                                                    class="fileupload-exists">Change</span>
                                                                    <input id="myFile" type="file" runat="server" onchange="ShowPreview(this)">
                                                                </span><a href="#" class="btn fileupload-exists"  data-dismiss="fileupload" >Remove</a>
                                                            </div>
                                                        </div>
  function ShowPreview(input) {
        debugger;
        if (input.files && input.files[0]) {
            var ImageDir = new FileReader();
            ImageDir.onload = function (e) {
                $('#myimage').attr('src', e.target.result);
            }
            ImageDir.readAsDataURL(input.files[0]);
        }
    }  `

受保护的 HtmlInputFile myFile;

    public void fileuploadImage()
    {
        Guid name = Guid.NewGuid();
        if (IsPostBack)
        {
            if (myFile.PostedFile != null)
            {
                // File was sent

                var postedFile = myFile.PostedFile;
                int dataLength = postedFile.ContentLength;
                byte[] myData = new byte[dataLength];
                postedFile.InputStream.Read(myData, 0, dataLength);
                string ext = Path.GetExtension(postedFile.FileName);
                string filename = Path.GetFileName(postedFile.FileName);
                //  name = Guid.Parse(filename);
                postedFile.SaveAs(Server.MapPath("ProfileImage/" + name + ext));`