参考博文:

  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对象的更多相关文章

  1. JS ajaxfileUpload 一次性上传多个input控件 上传多个文件

    本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件. 具体方法: 1.修改ajax调用方法 如上图所示,只需要将ajaxFileUpload ...

  2. Js获取file上传控件的文件路径总结

    总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...

  3. ftp上传或下载文件工具类

    FtpTransferUtil.java工具类,向ftp上传或下载文件: package utils; import java.io.File; import java.io.FileOutputSt ...

  4. input type=file 上传文件样式美化(转载)

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  5. 判断input[type=file]上传文件格式

    input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var fil ...

  6. 使用input=file上传

    前台,form的target指向iframe <form action="/EmailHandler.ashx?action=upload" id="form1&q ...

  7. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  8. 如何用一张图片代替 'input:file' 上传本地文件??

    今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传 ...

  9. HTML5: input:file上传类型控制

    ylbtech-HTML5: input:file上传类型控制   1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...

随机推荐

  1. 如何方便的结果ajax使用html5的新type类型

    今天需要做手机端的输入表单自动生成器,突然就想到了手机端对input的输入类型支持还不错,于是翻遍了资料,有了下面的使用方法,闲话少说,上正文: html5现在可以用的新input type类型一共有 ...

  2. HTTP中常见的各种状态码详解及解决方案

    总结了一些常见的http的状态码,以及常见的解决方案. 一.各范围内状态码大致含义 1xx:临时响应(Informational),需要请求者继续执行操作的状态代码,表示服务器正在接受请求. 2xx: ...

  3. Scala(三):类

    类:Class 1.简单类和无参方法 2.带getter和setter属性 3.只带getter属性 4.对象私有字段 5.Bean属性 6.辅助构造器 7.主构造器 8.嵌套类 1.简单类和无参方法 ...

  4. 20155239吕宇轩 Linux下IPC机制

    20155239吕宇轩 Linux下IPC机制 - 共享内存 原理:把所有需要使用的共享数据都存放在共享内存 区域中,任何想要访问这些共享数据的进程都必须在自己的进程地址空间中新增加一块内存区域,用来 ...

  5. 2017-2018-2 《网络对抗技术》20155322 Exp6 信息搜集与漏洞扫描

    [-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实践过程 2.1-Google hacking & ZoomEye 2.2-DNS.IP信息收 ...

  6. 安装OpenLDAP步骤

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  7. 基于Keras的imdb数据集电影评论情感二分类

    IMDB数据集下载速度慢,可以在我的repo库中找到下载,下载后放到~/.keras/datasets/目录下,即可正常运行.)中找到下载,下载后放到~/.keras/datasets/目录下,即可正 ...

  8. MTCNN(Multi-task convolutional neural networks)人脸对齐

    MTCNN(Multi-task convolutional neural networks)人脸对齐 .

  9. POJ2079 Triangle

    题面 题解 我什么时候会过这种东西???(逃 旋转卡壳板子题(听说这个算法有十六种读音??? 我是真的忘了这道题目怎么做了,挂个\(blog\),等我学会了再写题解 我的代码里居然有注释???好像还是 ...

  10. python爬虫之图片懒加载、selenium和phantomJS

    一.什么是图片懒加载 在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx"> ...