HTML元素accept属性限制文件大小怎么配合JS实现-html教程-PHP中文网

accept属性仅过滤文件类型，无法限制文件大小；真正校验需在change事件中通过input.files[0].size获取字节值，并结合前端阈值判断与后端双重验证。

html元素accept属性限制文件大小怎么配合js实现

accept 属性根本不能限制文件大小

accept 只负责过滤文件类型（如 "image/*"、".pdf"），它对文件体积完全无感。浏览器压根不会读取文件内容，更不会在选择阶段检查大小——这是个常见误解。想靠它拦住 100MB 的视频？不可能。

用 input.files[0].size 在 JS 中实时校验

真正能拿到文件大小的地方，是用户选完文件后触发的 change 事件里：input.files 是一个 FileList，每个 File 对象都有 size 属性（单位字节）。

实操建议：

监听 input 元素的 change 事件，别等表单提交才检查
立刻读取 event.target.files[0]?.size，注意空文件或取消选择时 files 可能为空
设阈值（比如 5MB = 5 * 1024 * 1024），超限就清空 input.value 并提示用户
别只靠前端校验——后端必须重复验证，否则绕过 JS 就能传任意大小

示例关键逻辑：

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file && file.size > 5 * 1024 * 1024) {
    alert('文件不能超过 5MB');
    e.target.value = ''; // 清空 input，否则下次 change 不触发
  }
});

配合 accept 做类型 + 大小双重过滤更靠谱

accept 虽然不限大小，但能减少用户误选非目标类型文件的概率，间接降低大文件误传几率。比如上传头像时写 accept="image/*"，比开放所有类型更合理。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

注意事项：