前端页面上传并操作文件

废话不多说,直接上代码

<body>
<input type="file" id="files"  style="display:none" onchange="chooseFile()" >
<a id="import"  class="btn btn-primary btn-sm">导入</a>
</body>

<script>
$("#import").click(function(){//点击导入按钮,使files触发点击事件,然后完成读取文件的操作。(为什么files的style要是none呢,ugly。。。。)
    $("#files").click();
});
function chooseFile(){
    var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("文件名:" + name + "大小:" + size);

    var reader = new FileReader();//读取操作
    reader.readAsText(selectedFile);//读取文件的内容
    // reader.readAsBinaryString(selectedFile);
    reader.onload = function () {//读取文件是异步进行的,onload方法是读取成功之后,你要进行的操作。
        var file = this.result.toString();
        // resolve(this.result)
        console.log(file);//log
        //此处我是进行了一个向后端传输文件的操作
        $.ajax({
            type: "post",
            cache: false,
            url: "",
            dataType: "text",
            ContentType:"application/x-www-form-urlencoded; charset=utf-8",
            data: {
                "file": file
            },
            success: function (data) {
                console.log(data)
                if (data == 0)
                alert("导入数据库成功!")
                else {
                    alert("导入失败!")
                }
            },
            error: function (data) {
                console.log(data)
                alert("未能导入数据库")
            }
        });
    };
}
</script>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值