Tenes que hacer algunos cambios a tu funcion readFile(), de todas maneras te comento todo el codigo:
function readFile(input) {
if (input.files && input.files[0]) {
let arr = input.files // guardamos el array de archivos que estan sin leer en este punto
for (let i = 0; i < input.files.length; i++) { // lo recorremos
let reader = new FileReader(); // cada vez que queramos leer un archivo redefinimos el reader, si usamos la misma instancia nos saltara el error (Uncaught InvalidStateError: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.)
reader.readAsDataURL(arr[i]); // leemos el archivo en el indice indicado
reader.addEventListener("load",() => { // al terminar de cargar el archivo
var htmlPreview =
'<img width="100" src="' +
reader.result + // ponemos el resultado del reader como src de la imagen
'" />' +
"<p>" +
input.files[i].name +
"</p>";
var wrapperZone = $(input).parent();
var previewZone = $(input)
.parent()
.parent()
.find(".preview-zone");
var boxZone = $(input)
.parent()
.parent()
.find(".preview-zone")
.find(".box")
.find(".box-body");
wrapperZone.removeClass("dragover");
previewZone.removeClass("hidden");
boxZone.append(htmlPreview);
})
}
};
}
function reset(e) {
e.wrap("<form>")
.closest("form")
.get(0)
.reset();
e.unwrap();
}
$(".dropzone").change(function() {
readFile(this);
});
$(".dropzone-wrapper").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("dragover");
});
$(".dropzone-wrapper").on("dragleave", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass("dragover");
});
$(".remove-preview").on("click", function() {
var boxZone = $(this)
.parents(".preview-zone")
.find(".box-body");
var previewZone = $(this).parents(".preview-zone");
var dropzone = $(this)
.parents(".form-group")
.find(".dropzone");
boxZone.empty();
previewZone.addClass("hidden");
reset(dropzone);
});
.container {
padding: 50px 100px;
}
.box {
position: relative;
background: #ffffff;
width: 100%;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
margin-bottom: 10px;
}
.box-tools {
position: absolute;
right: 10px;
top: 5px;
}
.dropzone-wrapper {
border: 2px dashed #91b0b3;
color: #92b0b3;
position: relative;
height: 150px;
}
.dropzone-desc {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 40%;
top: 60px;
font-size: 16px;
}
.dropzone,
.dropzone:focus {
outline: none !important;
width: 100%;
cursor: pointer;
}
.input-file {
position: absolute;
width: 100%;
height: 150px;
opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
background: #ecf0f5;
}
.preview-zone {
text-align: center;
}
.preview-zone .box {
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="estilos.css">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="10secs">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">10sec</h4>
</div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="preview-zone hidden">
<div class="box box-solid">
<div class="box-header with-border">
<div><b>Preview</b></div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-danger btn-xs remove-preview">
<i class="fa fa-times"></i> Reset
</button>
</div>
</div>
<div class="box-body"></div>
</div>
</div>
<div class="dropzone-wrapper">
<div class="dropzone-desc">
<i class="glyphicon glyphicon-download-alt"></i>
<div>Choose an image file or drag it here.</div>
</div>
<input type="file" class="dropzone input-file" multiple asp-for="@Model.Files10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="scripts2.js" defer></script>
</body>
</html>
Espero que te sirva.