JQueryUI如何读取本地文件

1、设计html界面,这用了两个按钮主要是因为file类型的按钮太丑了,后面跟一个输入框,这里把它隐藏,用下面的按钮激活文件选择对话框。

<input type="file" id="files" style="display: none" οnchange="GetFileName();" />

<input type="button" id="import" value="导入" />

2、js脚本中的内容:

首先绑定这两个按钮,点击import激活files然后响应GetFileName函数。

        $("#import").click(function () {//点击导入按钮,使files触发点击事件,然后完成读取文件的操作。

            $("#files").click();

        });

本来是想通过直接读取本地文件路径的方法实现这个功能,尝试多次发现这种方法行不通,主要是因为浏览器本身会保护本地文件,采用fakepath来代替真实路径,如果想要使用这种方法实现这个功能,就需要对浏览器的设置进行更改。考虑安全因素这里提供另一种方法结局这个问题。

方法一、直接通过文件路径读取文件(失败)

function GetFileName() {

            var selectedFile = document.getElementById("files").files[0];//获取读取的File对象

            var name = selectedFile.name;//读取选中文件的文件名

            var size = selectedFile.size;//读取选中文件的大小

            console.log("文件名:" + name + "大小:" + size);

}

方法二、利用dialog直接返回文件内容(成功)

这里的result中保存的就是文件的内容,后面直接对它进行操作即可。

function GetFileName() {

            var reader = new FileReader();//这里是核心!!!读取操作就是由它完成的。

            reader.readAsText(selectedFile);//读取文件的内容

            reader.onload = function () {

                console.log(this.result);//当读取完成之后会回调这个函数,然后此时文件的内容存储到了result中。直接操作即可。}

}

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值