Js 点击按钮 选择文件后 自动上传文件

本文介绍了一种使用JavaScript实现的批量导入用户的方法。通过点击按钮触发文件选择框,选取Excel文件后利用Ajax进行异步上传,最终将数据发送到服务器端进行处理。
    /*批量导入*/
    /*#load:为按钮,点击后生成一个隐藏的input file标签*/
    $('#load').after('<input type="file" id="load_xls" name="file" style="display:none" onchange ="uploadFile()">');
    $('#load').click(function(){
        document.getElementById("load_xls").click();
    });
    function uploadFile() {
        var myform = new FormData();
        myform.append('file',$('#load_xls')[0].files[0]);
        $.ajax({
            url: "admin.php?r=org/orguser/addusers",
            type: "POST",
            data: myform,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
            },
            error:function(data){
                console.log(data)
            }
        });
    }
要使用 JavaScript 去掉上传按钮实现文件自动上传,可以通过监听 `input` 元素的 `change` 事件,当用户选择文件后自动触发上传操作。以下是具体实现示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自动文件上传</title> </head> <body> <!-- 隐藏的文件选择输入框 --> <input type="file" id="fileInput" style="display: none;"> <button onclick="openFileDialog()">选择文件</button> <script> function openFileDialog() { document.getElementById('fileInput').click(); } document.getElementById('fileInput').addEventListener('change', function () { const file = this.files[0]; if (file) { const formData = new FormData(); formData.append('file', file); // 使用 Fetch API 进行文件上传 fetch('/upload', { method: 'POST', body: formData }) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.error(error)); } }); </script> </body> </html> ``` 在上述代码中,`input` 元素被设置为 `display: none` 以隐藏上传按钮。当用户点击选择文件按钮时,会触发 `openFileDialog` 函数,该函数模拟了点击 `input` 元素的操作,从而打开文件选择对话框。当用户选择文件后,`input` 元素的 `change` 事件会被触发,在事件处理函数中获取选择文件,并使用 `FormData` 对象将文件添加到表单数据中,最后使用 `Fetch API` 进行异步文件上传
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值