文档章节

前端那些事之H5本地读取文件

上官清偌
 上官清偌
发布于 2017/09/07 10:11
字数 151
阅读 52
收藏 1

h5读取本地文件内容

关于input的file框onchange事件触发一次失效的新的解决方法

  • 1:使用代理提交
$(form).on("change","#file",function(e){}

2:用$("#targetFile").replaceWith()方法

  • html

<div class="row">
    <div class="col-md-4">
        <label class="control-label  required-pf">License</label>
        <div class="form-group">
            <input type="text" id='addLicense' name="license" class="form-control">
            <span class="help-block"></span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <a class="btn btn-primary" style="position: relative;display: inline-block;top: 25px;left: -15px;">
                <span>Import</span>
                <!--<input id="id_file" style="position: relative;top: 28px;left: -30px" name="file" type="file">-->
                <input id="id_file" style="position: absolute;height: 30px;right: 0;top: 0;opacity: 0; width: 90px;" name="file" type="file">
            </a>
            <!--<button style="position: relative;top: 25px;left: -30px" class="btn btn-default" type="button">-->
            <!--</button>-->
        </div>
    </div>
</div>

  • js
//文件上传
$("form").on("change", "#updateLicenseFile", function () {
    var files =this.files;
    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                $("#updateLicense").val(this.result);
            };
        })(f);
        //读取文件内容
        reader.readAsText(f);
    }
    $("#updateLicenseFile").replaceWith('<input id="updateLicenseFile"  style="position: absolute;height: 30px;right: 0;top: 0;opacity: 0; width: 90px;" name="file" type="file">');
});

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 84
码字总数 118568
作品 0
浦东
程序员
用Electron创建跨平台应用(第一弹)

用Electron创建跨平台应用连载目录: 用Electron创建跨平台应用(第一弹) 用Electron创建跨平台应用(第二弹)开启多窗口 用Electron创建跨平台应用(第三弹)开启系统通知 Electron是GitHub开发的...

木子昭
08/27
0
0
移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

腾讯云加社区
06/11
0
0
项目需要,shell脚本自动化替换文档内容,并提交代码

项目需要,shell脚本自动化替换文档内容,并提交代码 #!/bin/bash if [ ! $commitTag ]; then echo "commitTag IS NULL" exit fi echo ".........................push code start ..............

爱coding
2017/10/31
0
0
FED之必备技能

flex.css快速入门,极速布局 什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚...

掘金官方
2017/12/08
0
0
浅谈Hybrid技术的设计与实现第二弹

上文说了很多关于Hybrid的概要设计,可以算得上大而全,有说明有demo有代码,对于想接触Hybrid的朋友来说应该有一定帮助,但是对于进阶的朋友可能就不太满足了,他们会想了解其中的每一个细节...

北方人在上海
2016/06/03
54
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部