已实现拖拽图片交换，如何添加点击div上传/交换图片功能？

Got it, let's get that click-to-upload functionality working alongside your existing drag-and-drop swap feature. The core issue right now is we're only handling drag events—we need to add logic for clicks and file selection, which we can do with a hidden file input element tied to your image's click event.

Here's the updated code with full click-and-drag functionality:

// Create and append your image element
let img = new Image();
document.getElementById("logo2").appendChild(img);

// Add a hidden file input to trigger file selection
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*'; // Restrict to image files only
fileInput.style.display = 'none'; // Hide the input from view
document.body.appendChild(fileInput);

function makeSwappable(imgEl) {
    // Keep your existing drag-and-drop handlers
    imgEl.addEventListener('drop', dropHandler);
    imgEl.addEventListener('dragover', dragoverHandler);
    imgEl.addEventListener('dragleave', dragleaveHandler);
    
    // Add click handler to open file picker
    imgEl.addEventListener('click', () => {
        fileInput.click(); // Trigger the hidden input's click event
    });

    // Handle file selection from the hidden input
    fileInput.addEventListener('change', (e) => {
        const selectedFile = e.target.files[0];
        if (selectedFile) {
            updateImageSource(selectedFile, imgEl); // Reuse file handling logic
        }
        // Reset input so selecting the same file again triggers change
        fileInput.value = '';
    });

    function dragoverHandler(e) {
        e.preventDefault();
        e.target.style.opacity = 0.2;
        e.target.style.transition = "0.4s ease-out"; // Fixed timing function syntax
        e.target.style.border = "dotted blue 0px";
        e.target.style.transform = "scale(0.97)";
    }

    function dragleaveHandler(e) {
        e.preventDefault();
        e.target.style.opacity = 1;
        e.target.style.border = "dotted transparent 0px";
        e.target.style.transform = "scale(1)";
        e.target.style.transition = "0.7s";
    }

    function dropHandler(e) {
        e.preventDefault();
        e.target.style.opacity = 1;
        e.target.style.border = "dotted transparent 0px";
        e.target.style.transform = "scale(1)";
        e.target.style.transition = "0.7s";
        
        const droppedFile = e.dataTransfer.files[0];
        if (droppedFile) {
            updateImageSource(droppedFile, e.target);
        }
    }

    // Reusable function to read file and update image src
    function updateImageSource(file, targetImg) {
        const fileReader = new FileReader();
        fileReader.onload = (ev) => {
            targetImg.src = ev.target.result;
        };
        fileReader.readAsDataURL(file);
    }
}

// Initialize the swappable functionality on your image
makeSwappable(img);

Key Improvements Breakdown: #

• Hidden File Input: We create a invisible file picker input that's triggered when the image is clicked—this lets users select files through the browser's native dialog.
• Click Event Listener: Ties the image's click to the hidden input's click, opening the file selection menu without cluttering your UI.
• Reusable File Logic: Extracted the file reading and image update into updateImageSource() so both drag-and-drop and click-to-upload use the same code (keeps things clean and DRY).
• Input Reset: After a file is selected, we reset the input's value so selecting the same file again will still trigger the change event.
• Fixed CSS Syntax: Corrected the invalid transition.timing.function line to be part of the transition property string.

Now your image div will handle both drag-and-drop swaps and click-to-upload image replacements seamlessly!

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