H5标签input标签上传文件

最新推荐文章于 2024-07-12 15:49:20 发布

浏览器翻译官~

最新推荐文章于 2024-07-12 15:49:20 发布

阅读量997

点赞数

CC 4.0 BY-SA版权

文章标签： input

本文链接：https://blog.youkuaiyun.com/lbPro0412/article/details/87913893

javascript 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的文件上传方法，并包含了实时显示上传进度的功能。通过监听文件选择事件，利用FileReader API读取文件内容，在上传过程中更新进度条，使用户能够直观了解文件上传状态。

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

<input type="file" name="batchList" onchange="uploadImg()" id="batchList" />

function uploadImg() {
            if ($("#batchList").val() == "") {
                console.log("空")
                return;
            }
            var e = window.event || event;
            // 获取当前选中的文件
            var oFile = e.target.files[0];
            console.log(oFile);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
        }

添加进度条：

<div style="margin-top: 10px;">
                        上传进度：<progress id="pro" value="0"></progress>
                    </div>

            var e = window.event || event;
            // 获取当前选中的文件
            var oFile = e.target.files[0];
            $("#uploadCon").html("上传文件：" + oFile.name);
            var pro = document.getElementById("pro");
            pro.max = oFile.size;
            var reader = new FileReader();
            reader.readAsBinaryString(oFile);
            reader.onprogress = function (evt) {
                pro.value = evt.loaded;
            }