停止將大小超過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的文件附加到此“ uploadFile”多個文件輸入。

但是它可以正確地“追加” div項目，並且不能停止將文件（大小超過5mb）附加到上述“ uploadFile”多個文件輸入中

我該如何解決

編輯

這是一個ASP.NET MVC應用程序，這就是我從后端獲取文件的方式

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

Answer 1

<input type="file">元素的.files屬性引用的FileList對象是只讀的。 盡管無法從FileList對象設置或刪除File對象，但是可以使用FileList .item()方法選擇特定索引處的單個File對象。 參見輸入文件以數組javascript / jquery 。

您可以使用FormData ， FormData.prototype.append() XMLHttpRequest()或fetch()只發送符合文件if條件服務器。

$('#uploadFile').on('change', function() {
  var fd = new FormData();
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  var count = 0;
  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>');
       fd.append("file-" + (count++), files[i])
    }
  }
  var request = new XMLHttpRequest();
  request.open("POST", "/path/to/server", true);
  request.send(fd);
  fileCount = Array.from(fd.keys()).length;
  showFileCount();
});