我正在使用 ASP.NET。在此剃刀页面(cshtml)中,我尝试创建一个功能,用户可以选择多个图像,预览它们,以及每个图像的删除按钮。就像我们在Facebook上可以一张一张地添加照片和删除一样。
现在我有这个 html 和 JavaScript 代码。问题是,当我选择 2 个图像 A 和 B 时,我删除图像 A 然后提交表单,图像 B 也消失了。这意味着删除按钮会重置整个文件输入,包括我不打算删除的文件。
这是为什么?我已经有一个 for 循环来迭代每个图像,为什么它会清除整个输入
function previewAdditionalPhotos(event) {
var previewContainer = document.querySelector('.additional-photos-preview');
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.match('image.*')) {
var reader = new FileReader();
reader.onload = function(e) {
var image = document.createElement('img');
image.className = 'preview-image';
image.src = e.target.result;
var removeButton = document.createElement('button');
removeButton.innerHTML = 'Remove';
removeButton.className = 'btn btn-danger remove-button';
removeButton.addEventListener('click', function() {
var previewDiv = this.parentNode;
var fileInput = document.querySelector('input[type="file"]');
fileInput.value = null;
previewContainer.removeChild(previewDiv);
});
var previewDiv = document.createElement('div');
previewDiv.appendChild(image);
previewDiv.appendChild(removeButton);
previewContainer.appendChild(previewDiv);
}
reader.readAsDataURL(file);
}
}
}
<div class="form-group photos-group">
<label asp-for="MediaFiles" class="control-label"></label>
<input type="file" name="MediaFiles" multiple class="form-control" onchange="previewAdditionalPhotos(event)" />
<span asp-validation-for="MediaFiles" class="text-danger"></span>
<div class="additional-photos-preview"></div>
</div>
<div class="form-group">
<img src="#">
</div>
这是您可以遵循的示例:
<form method="post" enctype="multipart/form-data" id="uploadForm">
<input type="file" name="images" id="fileInput" multiple />
<div id="previewContainer"></div>
<button type="submit">Upload Images</button>
</form>
@section Scripts {
<script>
let previewedFileNames = [];
function handleFileSelect(event) {
const previewContainer = document.getElementById('previewContainer');
previewContainer.innerHTML = '';
previewedFileNames = [];
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (!file.type.match('image.*')) {
continue;
}
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.src = e.target.result;
img.width = 100;
img.height = 100;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.onclick = function () {
previewContainer.removeChild(img);
previewContainer.removeChild(deleteButton);
const index = previewedFileNames.indexOf(file.name);
if (index !== -1) {
previewedFileNames.splice(index, 1);
}
};
previewContainer.appendChild(img);
previewContainer.appendChild(deleteButton);
previewedFileNames.push(file.name);
};
reader.readAsDataURL(file);
}
}
document.getElementById('fileInput').addEventListener('change', handleFileSelect);
document.getElementById('uploadForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the form from submitting normally
const formData = new FormData();
const files = document.getElementById('fileInput').files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (previewedFileNames.includes(file.name)) {
formData.append('images', file);
}
}
// Example: Send FormData to backend using fetch API
fetch('/home/create', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
console.log('Upload successful:', data);
})
.catch(error => {
console.error('Error during upload:', error);
});
});
</script>
}
控制器
[HttpPost]
public IActionResult Create(List<IFormFile> images)
{
var files = Request.Form.Files;
return View();
}