文档章节

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

上官清偌
 上官清偌
发布于 2017/09/07 10:11
字数 151
阅读 53
收藏 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
博文 87
码字总数 123671
作品 0
浦东
程序员
私信 提问
用Electron创建跨平台应用(第一弹)

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

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

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

腾讯云加社区
2018/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

没有更多内容

加载失败,请刷新页面

加载更多

Linux 命令

#查看系统版本cat /etc/issuecat /etc/redhat-release#yum源库路径/etc/yum.repos.d#更新源yum makecache#解包:tar zxvf FileName.tar#打包:tar czvf FileName...

MrPei
9分钟前
1
0
ZStack——自动化测试系统1:集成测试

测试,对于一个IaaS软件的可靠性、成熟度和可维护性而言,是一个重要的因素.测试在ZStack中是全自动的。这个自动化测试系统包括了三个部分:集成测试,系统测试,基于模块的测试。其中集成测...

ZStack社区版
13分钟前
1
0
springboot 中注入service为空

注意:在Controller中的方法必须用public 参考:spring boot 中使用@Autowired注入服务 服务为空没有注入成功

Skqing
25分钟前
3
0
PyCharm入门教程——IDE概要

PyCharm最新版本下载 JetBrains PyCharm是一种Python IDE,其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外,该IDE提供了一些高级功能,以用于Django框架下的专业Web...

电池盒
29分钟前
1
0
JVM 知识

一、类加载机制 二、对象的创建的过程 三、JVM内存结构 四、JVM GC 从垃圾回收的角度,由于现在收集器基本都采用分代垃圾收集算法,所以Java堆还可以细分为:新生代和老年代:再细致一点有:...

梦想_与_现实
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部