input限制上传的文件大小

最新推荐文章于 2024-06-05 16:27:31 发布

前端开心果

最新推荐文章于 2024-06-05 16:27:31 发布

阅读量8.1k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_38157825/article/details/107408372

版权

vue 专栏收录该内容

117 篇文章

订阅专栏

本文介绍如何在前端使用HTML的input元素限制文件上传的大小，通过JavaScript检查文件大小是否超过设定的最大值，确保上传过程顺利进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要限制input上传的文件大小

默认 `input` 上传文件的单位为 Byte (字节)

单位换算
1024Byte = 1KB
1024KB = 1MB
1024MB = 1GB

<el-form-item label ="上传文档：" prop="filePath">
    <input type="file" class="fl" id="batchImport" ref="batchImport" :accept="accept" name="batchImport" style="display: none;" @change="showWord($event)"/>
     <button id="upload" class="upload_btn" type="button" @click="uploadWord">请选择文档</button>
     <span id="document_name">{{wordResult}}</span>
     <div class="el-form-item__error" v-if="isError">请选择上传文档</div>
</el-form-item>

const file = document.getElementById('batchImport').files[0]
const fileMaxSize = 1024*1024*100
if (file.size > fileMaxSize) {
    this.$utils.showTip('error','','文档大小不超过100M！','文档大小不超过100M！')
} else {
    uploadReport(this);
}