文档章节

前端那些事之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

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 安装PHP5和PHP7

安装PHP5 下载解压二进制包 [root@test-a src]# cd /usr/local/src/[root@test-a src]# wget http://cn2.php.net/distributions/php-5.6.32.tar.bz2[root@test-a src]# tar jxvf php-5.6......

野雪球
今天
4
0
windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
4
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
6
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部