在上传时使用标签<input type =“file”/>读取文件名,并将其重命名为mvc + angularjs

时间:2017-04-16 04:16:25

标签: javascript html angularjs asp.net-mvc

我想在上传和重命名时读取文件名,将其保存到路径中。为了上传文件,我使用放在表格中的上传图片。我正在使用 -

@using (Html.BeginForm("file", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))

读取文件名和行值。但问题是,只要我点击,它就会读取第一行的值。这是我的代码 -

HTML -

<div>
  @using (Html.BeginForm("file", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
      <table>
        <tr ng-repeat = "{{data in list}}">
          <td>{{data.Name}}</td>
          <td>{{data.Id}}</td>
          <td>
            <label for="file">
              <i class="fa fa-upload" id="hello" aria-hidden="true" >
              </i>
            </label>
            <input type="file" name="file" id="file" onchange="this.form.submit();" />
            <input type="text" name="Name" id="Name" />
            <input type="text" name="Id" id="Id" />
          </td>
        </tr>
      </table>
    }

</div>

控制器 -

public ActionResult file(HttpPostedFileBase file, string Name, string Id)
    {

        if (file != null && file.ContentLength > 0)
        {
            string fileName = file.FileName;
            string newName = Name;
            string fileId = Id;
         }   
        else
        {
            ViewBag.Message = "You have not specified a file.";
        }
        return View("UploadPage");
    }

目前这是有效的,但是当我点击任何上传图片按钮时,它只需要第一行名称和ID。我无法解决它。请帮忙。

由于

1 个答案:

答案 0 :(得分:1)

您正在获得第一行,因为当this.form.submit();事件触发时,它会提交包含其中所有行的表单,并且只是HttpPostedFileBase而不是List<HttpPostedFileBase>,因此它将获取数据第一行,因为它将匹配参数。所以你有一个解决方案

public ActionResult file(List<HttpPostedFileBase> file, List<string> Name, List<string> Id)
        {
           for (int i = 0; i < file.Count; i++)
               {

                   var name = Name[i];
               } 

        }

更好的方法是使用class

public class UploadFiles
    {
        public HttpPostedFileBase File { get; set; }
        public string Name { get; set; }
        public int Id { get; set; }
    }

,您的观点将是

<div>
@using (Html.BeginForm("file", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
           <table>
            <tr ng-repeat = "{{data in list}}">
             <td>{{data.Name}}</td>
             <td>{{data.Id}}</td>
             <td>
                <label for="file">
                 <i class="fa fa-upload" id="hello" aria-hidden="true" >
                 </i>
                </label>
                <input type="file" name="files[{{$index}}].File" id="file" />
                <input type="text" name="files[{{$index}}].Name" id="Name" />
                <input type="text" name="files[{{$index}}].Id" id="Id" />
              </td>
              </tr>
            </table>

            <button type="submit" >Upload All</button>

          }
</div>

并在action

 public ActionResult AddAuto(List<UploadFiles> files)
        {
            foreach (var file in files)
                    {
                        // here you can access properties e.g file.File 
                    }
        }