JS原生上传文件

最新推荐文章于 2024-06-04 17:35:28 发布

桃花朵朵开3

最新推荐文章于 2024-06-04 17:35:28 发布

阅读量4.6k

点赞数 2

分类专栏：小白文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/qq_48445738/article/details/110005779

版权

小白专栏收录该内容

57 篇文章

订阅专栏

要想上传文件你需要认识FromData对象

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率必须post请求

上传文件元素

在HTML表单中，可以上传文件的唯一控件就是input type=“file”。

注意：当一个表单包含input type=“file”。时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑，浏览器只允许用户点击input type=“file”。来选择本地文件，用JavaScript对input type=“file”。的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径
通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件

通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件：

上代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #progress{
            height:10px;
            width:500px;
            border: 1px solid gold;
            position: relative;
            border-radius: 5px;
        }
        #progress .progress-item{
            height:100%;
            position: absolute;
            left:0;
            top:0;
            background: chartreuse;
            border-radius: 5px;
            transition: width .3s linear;
        }
    </style>
</head>
<body>
文件上传框<br>
<input type="file" id="file"><br>
显示进度条<br>
<div id="progress">
    <div class="progress-item"></div>
</div>
上传成功后的返回内容<br>
<span id="callback"></span>
</body>
<script>
    //首先监听input框的变动，选中一个新的文件会触发change事件
    document.querySelector("#file").addEventListener("change",function () {
        //获取到选中的文件
        var file = document.querySelector("#file").files[0];
        //创建formdata对象
        var formdata = new FormData();
        formdata.append("file",file);
        //创建xhr，使用ajax进行文件上传
        var xhr = new XMLHttpRequest();
        xhr.open("post","/");
        //回调
        xhr.onreadystatechange = function () {
            if (xhr.readyState==4 && xhr.status==200){
                document.querySelector("#callback").innerText = xhr.responseText;
            }
        }
        //获取上传的进度
        xhr.upload.onprogress = function (event) {
            if(event.lengthComputable){
                var percent = event.loaded/event.total *100;
                document.querySelector("#progress .progress-item").style.width = percent+"%";
            }
        }
        //将formdata上传
        xhr.send(formdata);
    });
</script>
</html>