使用不同标题上传多张图片

时间:2015-03-03 10:37:50

标签: c# asp.net

我的要求是。我将通过FileUpload一次上传3-4张图片。每张图片都有自己的TitleDescriptions等。

现在我的问题是,每次上传时我都会为图片添加title列。但是当我上传3-4张图片时,所有图片的titledescription都相同。

以下是我的 HTML ,可通过FileUpload进行图片上传。

 <tr>
    <td style="vertical-align: top;">
        <asp:label cssclass="control-label" id="Label1" runat="server">Image Title</asp:label>
    </td>
    <td>
        <div class="control-group">
            <div class="controls">
                <asp:textbox id="txtImagetitle" cssclass="form-control" runat="server" validationgroup="AddNew"></asp:textbox>
                <asp:requiredfieldvalidator cssclass="error-class" id="RequiredFieldValidator1" runat="server"
                    controltovalidate="txtImagetitle" errormessage="Please add the image title" validationgroup="AddNew"></asp:requiredfieldvalidator>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td style="vertical-align: top;">
        <asp:label cssclass="control-label" id="Label2" runat="server">Image description</asp:label>
    </td>
    <td>
        <div class="control-group">
            <div class="controls">
                <asp:textbox id="txtImagedesc" cssclass="form-control" runat="server" validationgroup="AddNew"></asp:textbox>
                <asp:requiredfieldvalidator cssclass="error-class" id="RequiredFieldValidator2" runat="server"
                    controltovalidate="txtImagedesc" errormessage="Please add the image description"
                    validationgroup="AddNew"></asp:requiredfieldvalidator>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td style="vertical-align: top;">
        <asp:label cssclass="control-label" id="Label3" runat="server">Image upload</asp:label>
    </td>
    <td>
        <div class="control-group">
            <div class="controls">
                <asp:fileupload id="FileUpload1" runat="server" allowmultiple="true" />
                <asp:requiredfieldvalidator cssclass="error-class" id="RequiredFieldValidator3" runat="server"
                    controltovalidate="FileUpload1" errormessage="Please add the gallery date" validationgroup="AddNew"></asp:requiredfieldvalidator>
            </div>
        </div>
    </td>
</tr>

在上传多张图片时,请建议在这种情况下该怎么做,如何为不同的图像设置不同的标题。

更新后的代码

protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (Request.QueryString.Count > 0)
    {
        foreach (var file in FileUpload1.PostedFiles)
        {
            string filename = Path.GetFileName(file.FileName);

            file.SaveAs(Server.MapPath("/GalleryImages/" + filename));

            using (SqlConnection conn = new SqlConnection(conString))

                if (Request.QueryString["Id"] != null)
                {
                    string Id = Request.QueryString["Id"];

                    SqlCommand cmd = new SqlCommand();
                    cmd.CommandText = " Update tbl_galleries_stack SET gallery_id=@gallery_id,img_title=@img_title,img_desc=@img_desc,img_path=@img_path, IsDefault=@IsDefault Where Id=@Id";
                    cmd.Parameters.AddWithValue("@Id", Id);
                    cmd.Parameters.AddWithValue("@gallery_id", ddlgallery.SelectedValue);
                    cmd.Parameters.AddWithValue("@img_title", txtImagetitle.Text);
                    cmd.Parameters.AddWithValue("@img_desc", txtImagedesc.Text);
                    cmd.Parameters.AddWithValue("@img_path", filename);
                    cmd.Parameters.AddWithValue("@IsDefault", chkDefault.Checked);
                    cmd.Connection = conn;
                    conn.Open();
                    cmd.ExecuteNonQuery();
                    conn.Close();
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", "alert('Gallery updated sucessfully');window.location ='csrgalleriesstack.aspx';", true);
                }
        }
    }
    else
    {
        foreach (var file in FileUpload1.PostedFiles)
        {
            string filename = Path.GetFileName(file.FileName);

            file.SaveAs(Server.MapPath("/GalleryImages/" + filename));
            SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString);
            using (SqlCommand cmd = conn.CreateCommand())
            {
                conn.Open();
                SqlCommand cmd1 = new SqlCommand("Insert into tbl_galleries_stack (gallery_id,img_title,img_desc,img_path,IsDefault) values(@gallery_id,@img_title, @img_desc, @img_path,@IsDefault)", conn);
                cmd1.Parameters.Add("@gallery_id", SqlDbType.Int).Value = ddlgallery.SelectedValue;
                cmd1.Parameters.Add("@img_title", SqlDbType.NVarChar).Value = txtImagetitle.Text;
                cmd1.Parameters.Add("@img_desc", SqlDbType.NVarChar).Value = txtImagedesc.Text;
                cmd1.Parameters.Add("@img_path", SqlDbType.NVarChar).Value = filename;
                cmd1.Parameters.Add("@IsDefault", SqlDbType.Bit).Value = chkDefault.Checked;
                cmd1.ExecuteNonQuery();
                conn.Close();
                ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", "alert('Gallery added sucessfully');window.location ='csrgalleriesstack.aspx';", true);
            }
        }
    }
}

2 个答案:

答案 0 :(得分:1)

看起来您只有一组输入与单个文件上传相关联,并打开了多个。

您可能要关闭多个并允许用户添加这些图像的报告集,或者在上传的网格视图中进行标题编辑等。

你也可以支持一个&#34;持有单元&#34;他们上传的位置,然后必须在实际将其保存到数据存储之前输入该信息。

答案 1 :(得分:1)

您无法提供不同的标题/说明,因为您没有选择提供它。周期。

<小时/> 您被迫使用多个文件上载控件。这也很棘手,因为asp:FileUpload控件在回发后不会维持状态。

所以,我能看到的解决方案是两部分的。创建两个面板并在页面加载时隐藏第二个面板

第1部分
在页面的第一个面板中放置一个标签,文本框和按钮。 Panel 1
当用户输入一个值(例如10)并触发EnterButton_click关闭Panel1并打开Panel2时。

第2部分

在面板2上,放置一个像这样的GridView

<asp:GridView ID="ImagesGrid" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Sl No">
            <ItemTemplate><%# Container.DisplayIndex + 1 %></ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Title">
            <ItemTemplate>
                <asp:TextBox ID="txtTitle" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Description">
            <ItemTemplate>
                <asp:TextBox ID="txtDescription" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="File">
            <ItemTemplate>
                <asp:FileUpload ID="flUpload" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:Button ID="SaveButton" Text="Save" runat="server" OnClick="SaveButton_Click"/>

现在,在面板1上的Enter按钮单击事件中,写下此内容。

// the idea is to create an empty gridview with number of rows client selected
protected void EnterButton_Click(object sender, EventArgs e)
{
    //in this, 10 has been entered    
    var imageCount = Convert.ToInt32(txtImageCount.Text);
    //var list = new List<string>();

    //for (int i = 0; i < imageCount; i++)
    //{
    //    list.Add(string.Empty);
    //}
    var list = new List<string>(10);
    list.AddRange(Enumerable.Repeat(String.Empty, imageCount));
    ImagesGrid.DataSource = list;
    ImagesGrid.DataBind();

    //TO DO: hide panel1 and make panel2 visible
}

因此,点击回车,您将获得一个包含十行的空网格视图。 Panel 2

现在填写GridView中的行,执行验证并点击Save。在“保存”按钮单击事件上,您可以像这样访问WebControl。

protected void SaveButton_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in ImagesGrid.Rows)
    {
        var title = row.FindControl("txtTitle") as TextBox;
        var description = row.FindControl("txtDescription") as TextBox;
        var imageFile = row.FindControl("flUpload") as FileUpload;
        string filename = Path.GetFileName(imageFile.FileName);
        imageFile.SaveAs(Server.MapPath("/GalleryImages/" + filename));
        //TO DO: write save routine
    }
}