前端那些事之H5本地读取文件
前端那些事之H5本地读取文件
上官清偌 发表于3个月前
前端那些事之H5本地读取文件
  • 发表于 3个月前
  • 阅读 48
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: H5本地读取文件

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">');
});
共有 人打赏支持
粉丝 10
博文 78
码字总数 83811
×
上官清偌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: