时间戳

首页 > 解决方案 > 如何使用 jquery ajax 在 asp.net mvc 中使用文件上传附加多个文件

c# - 如何使用 jquery ajax 在 asp.net mvc 中使用文件上传附加多个文件

问题描述

嗨，我想使用 jquery ajax 附加多个文件并将其保存在数据类型为 blob 的表的列中。我不知道在模型类中需要采用哪些不同的属性我已经采用了 HttpPostedFileBase 类型模型类的单个变量附加

  public class Ipcell
  {
   public string CaseId { get; set; }
   public HttpPostedFileBase Attach { get; set; }
  }

视图是一个局部视图，其中文件上传按钮除了其他值之外可用，并且在底部给出了提交按钮。附加多个文件后，然后单击提交按钮，该局部视图中的所有值以及不同的附件应保存在数据库中，即附件在表的 blob 类型列中。

@model Smart.Models.Ipcell
<div>
<div> caseid<input id="Rcid" type="text" value="@Model.CaseId" /></div><br />
<div>attachment<input id="Rattc" type="file" style="margin-left:7%;padding-left:30%;"/></div><br />
<input id="Rsub" type="submit" />
</div>

单击“RSub”时，应使用 jquery ajax 通过控制器将数据保存到数据库。jQuery端

$(document).on("click", '#Rsub1', function (e) { 
 var casedetail42={};
 var casedetail42s=[];           
casedetail42["CaseId"] = $('#Rcid').val();
casedetail42["Attach1"] =$('#Rattc').prop('files')[0];
casedetail42s.push(casedetail42); 
 $.ajax({
          type:"POST",
          url:"/Home/RaisePReq",
          data:JSON.stringify(casedetail42s),
          contentType:"application/json; charset=utf-8",
          datatype:"json",
          success:function(r){                        
          alert(r);
         },
     });
  });

控制器端，在控制器端我没有在流 fs 中获得任何价值

[HttpPost]
public JsonResult RaisePReq(List<Pcell> casedetail42)
 {           
   Byte[] bytes = null;
   Stream fs = casedetail42[0].Attach1.InputStream;
   BinaryReader br = new BinaryReader(fs);
   bytes = br.ReadBytes((Int32)fs.Length);
   try
    {
      conn.Open();
      string qry1_1 = "query for insert file upload value in a column with blob format"
      OracleCommand command = new OracleCommand(qry1_1, conn);
      command.Parameters.Add(":IBD_ATTACHMENTS", bytes);    
      int insertedRecords = command.ExecuteNonQuery();
      return Json(insertedRecords);
     }
  }

如何实现它任何想法将不胜感激。

标签： c#jqueryasp.netajaxasp.net-mvc

解决方案

您必须在表单响应模型中使用 HttpPostedFileBase 数组：

public class UploadModel  
{  
    public HttpPostedFileBase[] fileArr { get; set; }           
}

向控制器添加这样的方法：

[HttpPost]
        public ActionResult UploadFiles(HttpPostedFileBase[] files)
        {
            foreach (HttpPostedFileBase file in files)
            {
                if (file != null)
                    file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles/") + Path.GetFileName(file.FileName)));
            }

            return View();
        }

在视图中添加多个文件输入和上传按钮：

<input type="file" id="FileUpload1" multiple />  
<input type="button" id="btnUpload" value="Upload Files" />

使用此脚本（不要忘记将“YourControllerName”替换为控制器名称）：

<script>  
$(document).ready(function(){  
    $('#btnUpload').click(function () {  
 
            var fileUpload = $("#FileUpload1").get(0);  
            var files = fileUpload.files;  
              
            var fileData = new FormData();  
  
            for (var i = 0; i < files.length; i++) {  
                fileData.append(files[i].name, files[i]);  
            }  
                    
            $.ajax({  
                url: '/YourControllerName/UploadFiles',  
                type: "POST",  
                contentType: false, 
                processData: false, 
                data: fileData,  
                success: function (result) {  
                    alert(result);  
                },  
                error: function (err) {  
                    alert(err.statusText);  
                }  
            });  

    });  
});  
</script>

如果要将发布的文件保存到数据库，请创建一个像这样的表，带有 varbinary(max) 的 FileData 列保存文件：

CREATE TABLE [dbo].[TblFile](
    [FileId] [int] IDENTITY(1,1) NOT NULL,
    [FileName] [nvarchar](50) NULL,
    [ContentType] [nvarchar](200) NULL,
    [FileData] [varbinary](max) NULL,
 CONSTRAINT [PK_TblFile] PRIMARY KEY CLUSTERED 
(
    [FileId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

将发布的文件保存在数据库中的示例代码：

byte[] bytes;
        using (BinaryReader br = new BinaryReader(postedFile.InputStream))
        {
            bytes = br.ReadBytes(postedFile.ContentLength);
        }
        string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            string query = "INSERT INTO tblFiles VALUES (@FileName, @ContentType, @FileData)";
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.Connection = con;
                cmd.Parameters.AddWithValue("@FileName", Path.GetFileName(postedFile.FileName));
                cmd.Parameters.AddWithValue("@ContentType", postedFile.ContentType);
                cmd.Parameters.AddWithValue("@FileData", bytes);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }

推荐阅读