用js实现的多文件上传还可以删除

**

js

**

<script>
    document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

    function handleFileSelect(event) {
        var files = event.target.files;

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var listItem = createListItem(file);
            document.getElementById('fileList').appendChild(listItem);
        }
    }

    function createListItem(file) {
        var listItem = document.createElement('li');
        listItem.innerHTML = '<span>' + file.name + '</span>' +
                             '<button class="delete-btn">Delete</button>';

        var deleteButton = listItem.getElementsByClassName('delete-btn')[0];
        deleteButton.addEventListener('click', function() {
            listItem.remove();
        });

        return listItem;
    }
</script>

**

java

**

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.StandardCopyOption;
import java.util.ArrayList;
import java.util.List;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class FileUploadController {
private static final String UPLOAD_DIR = “uploads”;

@PostMapping("/upload")
public List<String> uploadFiles(@RequestParam("files") MultipartFile[] files) {
    List<String> filenames = new ArrayList<>();

    for (MultipartFile file : files) {
        if (file.isEmpty()) {
            continue; // Skip empty files
        }

        String filename = StringUtils.cleanPath(file.getOriginalFilename());
        Path uploadPath = Path.of(UPLOAD_DIR);

        try {
            if (!Files.exists(uploadPath)) {
                Files.createDirectories(uploadPath);
            }

            Path filePath = uploadPath.resolve(filename);
            Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
            filenames.add(filename);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    return filenames;
}

@GetMapping("/files")
public List<String> getUploadedFiles() {
    List<String> filenames = new ArrayList<>();

    try {
        Path uploadPath = Path.of(UPLOAD_DIR);
        File[] files = new File(uploadPath.toString()).listFiles();

        if (files != null) {
            for (File file : files) {
                if (file.isFile()) {
                    filenames.add(file.getName());
                }
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    }

    return filenames;
}

@DeleteMapping("/files/{filename}")
public String deleteFile(@PathVariable String filename) {
    try {
        Path uploadPath = Path.of(UPLOAD_DIR);
        Path filePath = uploadPath.resolve(filename);
        Files.deleteIfExists(filePath);

        return "File deleted successfully: " + filename;
    } catch (IOException e) {
        e.printStackTrace();
        return "Failed to delete file: " + filename;
    }
}

}