停止将大小超过5mb的文件附加到多个文件输入

Question

我开发了自定义多文件上传功能，如下所示

这是上面模块的整个代码

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>

脚本

var fileCount = 0;

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) 
  {
    if (files[i].size < 5242880) 
    {
       $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' abc</div>' + '<p class="close" >X</p></span>');
    }
    else
    {
       alert("File size is more than 5MB");
       event.preventDefault();
       false;
    }
  }
  fileCount += files.length;
  showFileCount();
});

CSS

.filenameupload {
  width: 98%;
}

#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}

我试图阻止大小超过5mb的文件附加到这个＆＃39; uploadFile＆＃39;多个文件输入，使用上面的代码。

但它可以追加＆＃39;正确划分项目并且不能将文件（大小超过5mb）附加到上面的“uploadFile”文件中。多文件输入

如何解决此问题

修改

这是一个ASP.NET MVC应用程序，这就是我从后端获取文件的方式

[HttpPost]        
public ActionResult SomeAction(ModelClass model)
{
    var attchaedfiles = Request.Files;
    ...
}

Answer 1

FileList元素的.files属性引用的

<input type="file">对象是只读的。您可以使用.item() FileList方法在特定索引处选择单个File对象，但无法从{{1}设置或删除File对象对象。请参阅input file to array javascript/jquery。

您可以使用FileList，FormData，FormData.prototype.append()或XMLHttpRequest()仅向服务器发送符合fetch()条件的文件。

if