jquery 多图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图上传预览</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <div id="preview"></div>

    <script>
        $(document).ready(function() {
            $('#fileInput').on('change', function() {
                $('#preview').empty(); // 清空之前的预览
                var files = this.files;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var reader = new FileReader();
                    reader.onload = (function(file) {
                        return function(e) {
                            var img = $('<img>').attr('src', e.target.result).css('width', '100px');
                            $('#preview').append(img);
                        };
                    })(file);
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
</body>
</html>