js的网页文件上传

最新推荐文章于 2024-08-24 08:28:00 发布

菜汪在路上

最新推荐文章于 2024-08-24 08:28:00 发布

阅读量500

点赞数

分类专栏： js 文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/qx020814/article/details/127205464

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

File类，和各大编程语言相同，都是这个类名。方式也大同小异

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <p>
        <label for="txtFile">选着多个文件</label>
        <input type="file" id="txtFile" multiple name="txtFile"/>
    </p>
    <p>
        <input type="button" id="btnShow" value="显示文件信息内容" onclick="btnShowClick()"/>
    </p>
    <div id="xianShi"></div>
</form>
</body>
<script>
    function btnShowClick() {
        //获取到上传文件的标签。
        var txtFile = document.getElementById("txtFile");
        //取出所有文件
        var files = txtFile.files;
        console.log(files);
        var html = "";
        //遍历所有文件
        for (var i = 0; i < files.length; i++) {
            html += "文件名" + files[i].name + "<br/>";
            html += "文件大小" + files[i].size + "B" + "<br/>";
            html += "文件类型" + files[i].type + "<br/>";
            html += "文件最后修改的时间" + new Date(files[i].lastModified).toLocaleString() + "<br/><hr/>";
        }
        var xianShi = document.getElementById("xianShi");
        xianShi.innerHTML = html;
    }

</script>
</html>

预览上传文件：

这里我就直接放js代码，html代码和上面几乎相同，我做下一个案例的时候给删了.......

 function previewFile(obj) {
        var pv = document.querySelector("#xians");
        var fileList = obj.files;
        for (var i = 0; i < fileList.length; i++) {
            var file = fileList[i];
            // 判断符合的文件类型
            if (file.name.indexOf("png") != -1) {
                var reader = new FileReader();
                //读取完毕后调用的方法
                reader.onload = function (fl) {
                //创建一个span的标签
                    var span = document.createElement("span");
                    span.innerHTML = '<img style="width: 200px;padding-left: 10px"  src="' + this.result + '" alt="' + fl.name + '"/>'
                    pv.append(span);
                };
                reader.readAsDataURL(file);
            }
        }
    }

获取文件，判断文件，创建标签，插入img标签。我认为啊，多此一举，浪费我内存！

查看上传文件进度：

判断逻辑如下：

监听开始上传按钮

监听同步上传中

监听上传完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #pos-bar {
        display: none;
    }

    #pos {
        width: 0%;
        height: 30px;
        background-color: red;
        color: white;
        line-height: 30px;
        text-align: center;
    }
</style>
<body>
<fieldset>
    <legend>监控文件读取进度</legend>
    <span>选着文件</span>
    <input type="file" onchange="fileSelect(this)">
    <div id="pos-bar">
        <div id="pos"></div>
    </div>
</fieldset>
</body>
<script>
    function fileSelect(obj) {
        var file = obj.files[0];
        if (!file) {
            alert("请选择文件");
            return false;
        }
        if (file.size > 500 * 1024 * 1024) {
            alert("文件大于500MB")
            return false;
        }
        var pos = document.getElementById("pos")
        var pos_bar = document.getElementById("pos-bar")
        var reader = new FileReader();
        pos.textContent = "0%";
        pos.style.width = "0%";
        reader.onloadstart = function () {
        //开始上传，取消进度条的隐藏
            pos_bar.style.display = "block";
        }
        //进行中
        reader.onprogress = function (e) {
            var number = Math.round((e.loaded / e.total) * 100);
            if (number < 100) {
                pos.style.width = number + "%";
                pos.textContent = number + "%";
            }
        }
        //上传完成
        reader.onload = function () {
            pos.style.width = 100 + "%";
            pos.textContent = 100 + "%";
        }
        reader.readAsBinaryString(file);
    }
 }
</script>
</html>

这个案例挺好用的，符合实际需求。