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">');
});