html在线上传图片

HTML结构

使用<input>标签创建文件上传控件，并配置相关属性。

示例代码：

<input type="file" id="upload" accept="image/" multiple>
<img id="preview" src="#" alt="预览图" style="max-width: 300px;">

JavaScript处理逻辑

通过监听文件选择事件，读取文件并上传至服务器。

示例代码：

const uploadInput = document.getElementById('upload');
const previewImg = document.getElementById('preview');
// 监听文件选择
uploadInput.addEventListener('change', function(e) {
    const files = e.target.files;
    if (files.length === 0) return; // 未选择文件
    const file = files[0]; // 仅处理第一个文件（可扩展为多文件）
    // 图片预览
    const reader = new FileReader();
    reader.onload = function(e) {
        previewImg.src = e.target.result;
    };
    reader.readAsDataURL(file);
    // 上传文件（需后端接口支持）
    const formData = new FormData();
    formData.append('image', file);
    fetch('/upload', { method: 'POST', body: formData })
        .then(response => response.json())
        .then(data => console.log('上传成功:', data))
        .catch(err => console.error('上传失败:', err));
});

图片预览优化

若需支持多文件预览，可动态生成预览区域。

uploadInput.addEventListener('change', function(e) {
const files = e.target.files;
const previewContainer = document.getElementById('preview-container');
previewContainer.innerHTML = ''; // 清空旧预览
Array.from(files).forEach(file => {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '100px';
previewContainer.appendChild(img);
};
reader.readAsDataURL(file);
});
});

样式与兼容性

1. 隐藏原始控件：可通过CSS隐藏<input>，用自定义按钮触发点击事件。

   #upload { display: none; }
   #custom-btn { cursor: pointer; }

   <button id="custom-btn">选择图片</button>
   <script>
     document.getElementById('custom-btn').addEventListener('click', () => {
       document.getElementById('upload').click();
     });
   </script>

2. 兼容性：FileReader和FormData在现代浏览器中均支持,低版本IE需降级处理。

常见问题与解答

问题1：如何限制上传文件的类型和大小？

if (file.size > 5 1024 1024) { // 超过5MB
alert('文件过大！');
return;
}

问题2：如何一次性上传多张图片？

• 设置multiple属性允许多选文件。
• 遍历files列表，分别处理每个文件：

  Array.from(files).forEach(file => {
    // 对每个文件执行预览或上传逻辑