js超链接实现文件上传

实现文件上传的超链接

使用HTML和JavaScript创建超链接实现文件上传功能，可以通过隐藏的<input type="file">元素触发文件选择对话框。

<a href="#" id="uploadLink">点击上传文件</a>
<input type="file" id="fileInput" style="display: none;" />

<script>
document.getElementById('uploadLink').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('fileInput').click();
});

document.getElementById('fileInput').addEventListener('change', function() {
    if (this.files.length > 0) {
        console.log('已选择文件:', this.files[0].name);
        // 这里可以添加文件上传逻辑
    }
});
</script>

使用样式美化上传按钮

通过CSS将文件输入框伪装成超链接样式，实现更自然的用户体验。

<style>
.upload-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>

<span class="upload-link" onclick="document.getElementById('styledFileInput').click()">
    点击上传文件
</span>
<input type="file" id="styledFileInput" style="display: none;" />

多文件上传实现

修改输入框属性以支持多文件选择，并处理多个文件的上传。

<a href="#" id="multiUploadLink">点击上传多个文件</a>
<input type="file" id="multiFileInput" multiple style="display: none;" />

<script>
document.getElementById('multiUploadLink').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('multiFileInput').click();
});

document.getElementById('multiFileInput').addEventListener('change', function() {
    Array.from(this.files).forEach(file => {
        console.log('已选择文件:', file.name);
        // 处理每个文件的上传
    });
});
</script>

使用FormData进行AJAX上传

结合FormData和XMLHttpRequest或fetch API实现无刷新文件上传。

document.getElementById('fileInput').addEventListener('change', function() {
    if (this.files.length === 0) return;

    const formData = new FormData();
    formData.append('file', this.files[0]);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('上传成功:', data))
    .catch(error => console.error('上传失败:', error));
});

拖放上传实现

除了点击上传外，还可以实现拖放文件到指定区域上传的功能。

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px; text-align: center;">
    将文件拖放到此处上传
</div>

<script>
const dropArea = document.getElementById('dropArea');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
});

function highlight() {
    dropArea.style.borderColor = 'blue';
}

function unhighlight() {
    dropArea.style.borderColor = '#ccc';
}

dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    // 处理拖放的文件
    console.log('拖放的文件:', files);
}
</script>

文件上传进度显示

使用XMLHttpRequest的progress事件显示上传进度。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        console.log('上传进度:', Math.round(percentComplete) + '%');
    }
};

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('上传完成');
    }
};

const formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.send(formData);