文件上传（单文件）

つ派小星

已于 2023-03-20 03:02:20 修改

阅读量262

点赞数 1

分类专栏：学习分享文件上传文章标签： javascript 前端 html

于 2023-03-19 05:45:40 首次发布

本文链接：https://blog.csdn.net/qq_45718618/article/details/129646244

版权

学习分享同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

文件上传

1 篇文章 0 订阅

订阅专栏

该文章展示了如何使用JavaScript实现单文件上传功能，特别是图片的本地预览。通过监听文件输入元素的change事件，利用FileReader接口读取文件并转换为Base64显示在img标签中。点击上传按钮后，使用Ajax发送文件到服务器。当上传成功时，清除表单和预览图，并调用函数展示上传文件的列表。

摘要由CSDN通过智能技术生成

简单的单文件上传：
主要是上传图片 本地预览 纯 js 代码逻辑展示，如果上传的不是图片可以通过 file.type 来判断文件的类型，不是图片的话可以给一个固定的图片作为展示，可自行添加。

后续会有一个多文件上传、大文件上传分享。

<body>
    <div>
        单文件上传：
        <input type="file" value="" id="file" accept="image/*" />
        <!-- 本地预览 -->
        <img alt="暂无图片" id="myImg" style="width:100px;">
        <button id="upload">上传</button>
    </div>
    <!-- 预留本地预览 -->
    <div class="lists"></div>
</body>

<script>
    var input = document.querySelector("#file"); //上传的文件
    var upload = document.querySelector("#upload"); //上传按钮
    var myImg = document.querySelector("#myImg"); //本地预览图片
    var lists = document.querySelector(".lists"); //列表展示
	
    //本地预览
    input.onchange = function (e) {
    	var files = input.files ? input.files : [];
        if (!files.length || !window.FileReader) {
            console.log('浏览器不支持 ');
            return false;
        };
        //获取文件对象
        console.log(e.target);
        var file = e.target.files[0];
        var reader = new FileReader(); //是一种异步文件读取
        reader.readAsDataURL(file); //转成base64
        //数据读取完成触发
        reader.onload = function (event) {
            console.log(event); //event.target.result;
            myImg.src = event.target.result;
        }
    };
    //单击上传按钮
    upload.onclick = function () {
    	var files = input.files ? input.files : [];
        //浏览器是否支持 HTML5
        if (!files.length || !window.FileReader) {
            console.log('浏览器不支持 ');
            return false;
        };
        //ajax
        var fd = new FormData(); //通过formData将文件转成二进制数据（流）;
        fd.append('file', files[0]);

        var request = new XMLHttpRequest();
        request.open('post', 'http://139.196.42.209:8001/upload/single');
        request.send(fd);
        request.onreadystatechange = function () {
            if (request.readyState == 4 & request.status == 200) {
                alert('上传成功');
                input.value = ''; //清空表单值
                myImg.src = ''; //清空本地预览
                list(); //调用列表展示
            }
        }
    };
    //数据展示
    function list() {
        var request = new XMLHttpRequest();
        request.open('get', 'http://139.196.42.209:8001/upload/list');
        request.send();
        request.onreadystatechange = function () {
            if (request.readyState == 4 & request.status == 200) {
                var response = JSON.parse(request.responseText);
                console.log(response);
                var str = "<ul>";
                response.list.forEach(function (item, i) {
                    str += "<li>" + item + "</li>"
                });
                str += "</ul>";
                lists.innerHTML = str;
            }
        }
    };
</script>