关于自定义一个上传的file按钮

最新推荐文章于 2023-12-01 19:08:19 发布

weixin_30672019

最新推荐文章于 2023-12-01 19:08:19 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/czy960731/p/8387678.html

本文介绍了一种使用原生JS实现的文件上传组件，通过自定义按钮触发文件选择，并利用FormData和XMLHttpRequest完成文件上传及进度显示。该方案不依赖第三方库，提供了简洁高效的文件上传解决方案。

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

在input中html给我们一个 type file用来做文件上传的功能，比如

但是这样的样式，实在难看，在开发的时候看了layui和bootstrap的点击上传，都很不错。

前者的调用方式和js的差别太大，后者需要引入bootstrap fileinput.js 我都不是很满意，

后来写了一个原生的js来调用，话说我还是引用了layui的css样式，因为确实不错

看下代码

1     <input type="file" onchange="upload()" style="display:none" id="file-input" />
2     <button onclick='selectFile()'>上传</button>

这是没有引入layui的类之前的html，他的input type file是默认隐藏的，我们可以在

按钮上模拟input的点击事件

var inputBox = document.getElementById("file-input");
        
        function selectFile(){
            inputBox.click()
        }

点击之后，input就相当于被点击，开始上传文件，当上传文件的时候，input上绑定的onchange();就开始生效了

这是一个加载的函数

function upload(){
        //alert(123);
            var file = inputBox.files[0]
            if(! file){
                alert('请选择文件')
                return
            }
            var form = new FormData()
            form.append('file',file)
            var xhr = new XMLHttpRequest();
            xhr.open("post", '../../api/receiveOptionQuestion', true);      
            xhr.onload = function () {   
                alert(xhr.responseText);
            };
            xhr.upload.addEventListener("progress", function(e){
                console.log(e.loaded / e.total * 100)
            }, false);
            xhr.send(form);
        }