文档章节

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

上官清偌
 上官清偌
发布于 2017/09/07 10:11
字数 151
阅读 51
收藏 1
点赞 0
评论 0

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
博文 85
码字总数 118519
作品 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
浅谈Hybrid技术的设计与实现

随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本、高效率、跨平台等特性马上被利用...

黄金林
2016/12/21
10
0
Android WebView 的三种使用方式

关于原生开发好,还是混合模式开发好,还是 套壳的方式好,在这里不是重点,没有最好的,只有相对适合的。重点是 那种方式 以最低的资源代价 适合你的业务场景,适合你的团队,根据实际情况来...

zhaiguangtao
2016/12/14
38
0
【腾讯Bugly干货分享】美团大众点评 Hybrid 化建设

本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/rNGD6SotKoO8frmxIU8-xw 本期 T 沙龙探讨了移动端热更新相关的话题。由于沙龙时间...

腾讯Bugly
2016/12/06
49
0
微信小程序自问自答

为啥叫小程序? 微信的小程序不是白叫叫的,小程序设计时已经具备原生应用的应用生命周期;小程序启动时会提供三个重要的初生命周期监听函数:onLaunch, onShow, onHide; onLaunch:小应用启...

Martin_Luo
2016/11/07
111
1
Android WebView:性能优化不得不说的事

页面加载速度优化 影响页面加载速度的因素有非常多,我们在对 WebView 加载一个网页的过程进行调试发现,每次加载的过程中都会有较多的网络请求,除了 web 页面自身的 URL 请求,还会有 web ...

3kqing
2016/09/22
79
0
搭建bower私服(svn)

目录 1 文档概述 2 具体步骤 2.1 软件环境: 2.2 软件环境搭建教程 2.2.1 安装 SVN 客户端 2.2.2 安装 nodejs 客户端 2.2.3 npm 组件bower 的安装 2.2.4 SVN 服务器 2.3 安装前端包到本地工程...

阿祥_开源中国
2016/03/01
182
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

对基于深度神经网络的Auto Encoder用于异常检测的一些思考

一、前言 现实中,大部分数据都是无标签的,人和动物多数情况下都是通过无监督学习获取概念,故而无监督学习拥有广阔的业务场景。举几个场景:网络流量是正常流量还是攻击流量、视频中的人的...

冷血狂魔
20分钟前
0
0
并发设计之A系统调用B系统

A-->B A在发送请求之前,用乐观锁,减少对B的重复调用,这样一定程度上是幂等性。 比如A系统支付功能,要调用B系统进行支付操作,但是前端对"支付"按钮不进行控制,即用户会不断多次点击支付...

汉斯-冯-拉特
41分钟前
0
0
HTTP协议通信原理

了解HTTP HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务。 HTTP使用...

寰宇01
今天
0
0
【Java动态性】之反射机制

一、Java反射机制简介

谢余峰
今天
1
0
Centos 6.X 部署环境搭建

1.Linux学习笔记CentOS 6.5(一)--CentOS 6.5安装过程

IT追寻者
今天
0
0
博客即同步至腾讯云+社区声明

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=8vy9bsmadbko...

xiaoge2016
今天
1
0
大数据教程(3.1):Linux系统搭建网络YUM源服务器

博主在前面的2.5章节讲述了linux系统本地YUM服务器的搭建和httpd轻量级静态网站服务器的安装,本节博主将为大家分享内网环境中搭建自己的网络YUM服务器的全过程。如果大家对本地YUM服务器还不...

em_aaron
今天
1
0
蚂蚁技术专家:一篇文章带你学习分布式事务

小蚂蚁说: 分布式事务是企业集成中的一个技术难点,也是每一个分布式系统架构中都会涉及到的一个东西,特别是在这几年越来越火的微服务架构中,几乎可以说是无法避免,本文就围绕分布式事务...

Java大蜗牛
今天
1
0
新的Steam应用将拓展服务项目

导读 未来几周,Steam将推出两个免费的应用程序Steam Link和Steam Video。这两个应用程序都旨在拓展Steam平台的业务和便利性。 即将开放的Steam Link应用程序最先提供了Android测试版,它将允...

问题终结者
今天
0
0
golang 第三方包的使用总结

golang 第三方包的安装的方法: 1. go get 安装 $ go get github.com/gin-gonic/gin 注意:执行go get 命令需要先安装git命令,并配置git全局变量。 2. 源码包安装 由于国内网络问题,很多时...

科陆李明
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部