Question

我想在我的MVC项目中实现这一目标。这只是我创建的一个演示，但我无法想到任何解决方案。

演示：

我想在提交表单之前添加多个文件并将其显示为列表。

当我通过单击“保存”提交表单时，应将所有文件添加到数据库中。此外，当我单击X符号时，它应该从列表中删除该文件。

我不知道是否可以将所有文件添加到对象中并使用ajax将其传递给控制器，如果是，请指导我如何执行此操作。

这是我到目前为止所做的......

 <script type="text/javascript">
 function addToList() {
    var attachmentName = $('#attach').val();
    var fileName = $('#fileId')[0].files[0].name;

    var tbl = $('#listTable tbody');

    tbl.append('<tr class="child" style="text-align:center"><td>' + 
    attachmentName + '</td><td style="float:left">' + fileName + '</td><td 
   style="float:left"><a href="#">X</a></td></tr>');

    }
  </script>

  <h2>Create</h2>

  <div style="font-family:Arial">
    @using (Html.BeginForm("Create", "Attachment", null, FormMethod.Post, 
    new { 
    enctype = "multipart/form-data" }))
    {
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="inputCity">Attachment Name</label>
            @Html.TextBoxFor(modelItem => Model.AttachmentName, new { @class 
             = "form-control", @id = "attach" })
        </div>
        <div class="form-group col-md-4">
            <label>Files</label>
            <input type="file" id="fileId" multiple />
        </div>
        <br />
        <div class="form-group col-md-4">
            <label></label>
            <input type="button" class="btn" onclick="addToList()" 
            value="Add" />
        </div>
    </div>
    <div style="width:100%; float:left">
        <table width="100%" id="listTable">
            <thead>
                <tr>
                    <th width="30%" style="text-align:center">Name</th>
                    <th width="40%" style="float:left">File</th>
                    <th width="30%" style="float:left"></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <br /><br />
    <br />
    <div style="width:100%; float:left">
        <input type="submit" value="Save" class="btn" />
    </div>
}

Answer 1

多张图片上传方法：

protected void Upload(object sender, EventArgs e)

foreach (HttpPostedFile postedFile in FileUpload1.PostedFiles)
{
    string filename = Path.GetFileName(postedFile.FileName);
    string contentType = postedFile.ContentType;
    using (Stream fs = postedFile.InputStream)
    {
        using (BinaryReader br = new BinaryReader(fs))
        {
            byte[] bytes = br.ReadBytes((Int32)fs.Length);
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                string query = "insert into tblFiles values (@Name, @ContentType, @Data)";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@Name", filename);
                    cmd.Parameters.AddWithValue("@ContentType", contentType);
                    cmd.Parameters.AddWithValue("@Data", bytes);
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }
    }
}
Response.Redirect(Request.Url.AbsoluteUri);}

并调用页面加载事件到上面的方法并绑定到列表：

protected void Page_Load(object sender, EventArgs e)

{
   if (!IsPostBack)
    {
    this.BindGrid();
    }
}

private void BindGrid()
  {
    string constr = 
      ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
     using (SqlConnection con = new SqlConnection(constr))
      {
         using (SqlCommand cmd = new SqlCommand())
       {
            cmd.CommandText = "SELECT Id, Name FROM tblFiles";
            cmd.Connection = con;
              con.Open();
            GridView1.DataSource = cmd.ExecuteReader();
            GridView1.DataBind();
             con.Close();
    }
}}

我希望你能完全解决你的问题，但如果你有任何问题请按照以下链接：

https://www.aspsnippets.com/Articles/Upload-and-save-insert-multiple-files-to-database-in-ASPNet-using-C-and-VBNet.aspx

Answer 2

在MVC项目中，可以同时上传多个文件，并使用完整的回发和jQuery文件上传来完成相同的操作。

但是在上传到服务器之前不可能保存多个文件。

备选方式，您可以使用jQuery文件上传在服务器上上传文件，在成功事件中，您可以获取要在屏幕上显示的上传文件的名称。如果要删除，可以通过在服务器上发送ajax请求来删除它。

最后，在提交整个表单时，您必须传递文件名列表，这些列表将存储到数据库中。

如何将多个文件添加为列表并在提交时保存到数据库中？

2 个答案: