将通过<input type="file">上传的txt文件存储在localStorage,提取并构建File对象
参考博文:
JS 之Blob 对象类型
在本地存储localStorage中保存图片和文件
<input type="file" id="jobData" onchange="loadFile(this.files[0])">
<script>
var filename_1 = localStorage.getItem("filename_1");//存在localStorage中的文件名
var fileresult_1 = localStorage.getItem("fileresult_1");//存在localStorage中的文件内容(string)
//若localStorage已有该项
if(filename_1 && fileresult_1){
//storageFile:通过localStorage中的文件内容和文件名构建的File对象
var storageFile = new File([fileresult_1], {"type":"text/plain"});//File继承自Blob,可以用Blob的构造函数
Object.defineProperty(storageFile,'name',{value:filename_1});
// console.log(storageFile);
}
function loadFile(file){
var fileReader = new FileReader();
fileReader.onload = function () {
var result = this.result;//文件内容
//确定,将文件保存到本地存储中,替换现有的
try {
localStorage.setItem("filename_1", file.name);
localStorage.setItem("fileresult_1", result);
}
catch (e) {
console.log("Storage failed: " + e);
}
};
fileReader.readAsText(file);
}
</script>
将通过<input type="file">上传的txt文件存储在localStorage,提取并构建File对象的更多相关文章
- JS ajaxfileUpload 一次性上传多个input控件 上传多个文件
本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件. 具体方法: 1.修改ajax调用方法 如上图所示,只需要将ajaxFileUpload ...
- Js获取file上传控件的文件路径总结
总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...
- ftp上传或下载文件工具类
FtpTransferUtil.java工具类,向ftp上传或下载文件: package utils; import java.io.File; import java.io.FileOutputSt ...
- input type=file 上传文件样式美化(转载)
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- 判断input[type=file]上传文件格式
input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var fil ...
- 使用input=file上传
前台,form的target指向iframe <form action="/EmailHandler.ashx?action=upload" id="form1&q ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 如何用一张图片代替 'input:file' 上传本地文件??
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传 ...
- HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...
随机推荐
- Golint的简易使用方法
根据作者的说法: Golint is a linter for Go source code. Golint differs from gofmt. Gofmt reformats Go source ...
- 《记忆匣子》——网络编程jsp网页制作复习习笔记1
内容都在图里 哈哈哈 <%@ page language="java" contentType="text/html; charset=utf-8" pa ...
- Qt5.4 All Modules
Qt5.4 All Modules Qt Essentials Qt essentials define the foundation of Qt on all platforms. They are ...
- easybcd删除win10启动项如何恢复?
制作windows启动盘: u盘启动 开始安装,选择左下角的"修复计算机": 运行命令 bcdboot c:\windows /l zh-cn 从系统盘C:\Windows目录中复 ...
- 11-[CSS]-标准文档流,display,浮动,清除浮动,overflow
1.标准文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 【SHOI2016】黑暗前的幻想乡
题面 题解 如果没有建筑公司的限制,那么就是个\(\mathrm{Matrix\;tree}\)板子 其实有了也一样 发现\(n\leq 17\),考虑容斥 每次钦定一些建筑公司,计算它们包含的边的生 ...
- 一目了然带你看lniux
第一部分 熟悉Linux基本操作 一.初识Linux 1.Linux特点 ◊ 开放性 ◊ 多用户 ◊ 多任务 ◊ 良好的用户界面 ◊ 设备独立性 ◊ 丰富的网络功能 ◊ 可靠的系统 ...
- 树莓派 Zero WH 初使用体验
12号买了一个树莓派 Zero WH,这个是什么型号呢?其实和树莓派Zero是同一系列的,加上W则表示多了无线Wifi和蓝牙模块,加上H则表示在板子上已经焊接好了2x20的排针. 这个Zero真的很迷 ...
- chrome JS关闭当前页无效问题
如果没有父窗口,JS中 window.opener = null; window.open("", "_self"); window.close(); 对chr ...
- node.js学习笔记——前序
一.什么是node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一 ...