寻求无需PHP的HTML图片上传代码，W3School的PHP上传代码无效

Got it! Since you want to handle image uploads entirely on the frontend without any PHP backend, we can use vanilla JavaScript to read, validate, and preview uploaded images directly in the browser. No server-side code needed at all. Here's a complete, ready-to-use example:

<!DOCTYPE html>
<html>
<head>
    <title>Frontend Image Upload</title>
    <style>
        .upload-container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 1.5rem;
            border: 2px dashed #ccc;
            border-radius: 8px;
            text-align: center;
        }
        .image-preview {
            margin-top: 1.5rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
        }
        .preview-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .error-message {
            color: #dc3545;
            margin-top: 1rem;
            display: none;
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h2>Upload Your Images</h2>
        <input type="file" id="imageUpload" accept="image/*" multiple>
        <p>Select one or more image files (JPG, PNG, GIF, etc.)</p>
        <div class="error-message" id="errorMsg"></div>
        <div class="image-preview" id="previewContainer"></div>
    </div>

    <script>
        const imageUpload = document.getElementById('imageUpload');
        const previewContainer = document.getElementById('previewContainer');
        const errorMsg = document.getElementById('errorMsg');

        imageUpload.addEventListener('change', handleImageUpload);

        function handleImageUpload(e) {
            // Clear previous previews and errors
            previewContainer.innerHTML = '';
            errorMsg.style.display = 'none';

            const files = e.target.files;
            if (files.length === 0) return;

            // Validate each file
            for (const file of files) {
                if (!file.type.startsWith('image/')) {
                    showError(`"${file.name}" is not an image file. Please select images only.`);
                    continue;
                }

                // Optional: Limit file size to 5MB
                const maxSize = 5 * 1024 * 1024; // 5MB
                if (file.size > maxSize) {
                    showError(`"${file.name}" is too large. Maximum file size is 5MB.`);
                    continue;
                }

                // Read and preview the image
                const reader = new FileReader();
                reader.onload = function(event) {
                    const imgElement = document.createElement('img');
                    imgElement.src = event.target.result;
                    imgElement.className = 'preview-image';
                    imgElement.alt = file.name;
                    previewContainer.appendChild(imgElement);
                };
                reader.readAsDataURL(file);
            }
        }

        function showError(message) {
            errorMsg.textContent = message;
            errorMsg.style.display = 'block';
        }
    </script>
</body>
</html>

Key Features Explained: #

• File Type Restriction: The accept="image/*" attribute ensures users can only select image files.
• Multiple Uploads: The multiple attribute lets users select multiple images at once.
• Validation: Checks if each file is an image and enforces a 5MB size limit (adjustable as needed).
• Instant Preview: Uses the FileReader API to load images directly in the browser and display previews.
• Clean UI: Basic styling to make the upload area and previews look polished.

Notes: #

• This setup only handles client-side processing—images aren't sent to a server. If you later need to save images to a server, you'd need to add backend code (but that's optional here).
• You can customize the styling, size limits, and supported file types to match your needs.

内容的提问来源于stack exchange，提问作者Edward Zhang