参考博文:

  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. 从0开始学golang--2.2--如何去爬园子的数据👉进阶篇,面向对象的单任务版

    执行页main.go-----------------------------------代码

  2. 【转】深入学习Redis(1):Redis内存模型

    原文:https://www.cnblogs.com/kismetv/p/8654978.html 前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Red ...

  3. 【转】netty源码分析之LengthFieldBasedFrameDecoder

    原文:https://www.jianshu.com/p/a0a51fd79f62 拆包的原理 关于拆包原理的上一篇博文 netty源码分析之拆包器的奥秘 中已详细阐述,这里简单总结下:netty的拆 ...

  4. JavaEE笔记(一)

    Hibernate Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自 ...

  5. windows7下解决caffe check failed registry.count(type) == 1(0 vs. 1) unknown layer type问题

    在Windows7下调用vs2013生成的Caffe静态库时经常会提示Check failed: registry.count(type) == 1 (0 vs. 1) Unknown layer t ...

  6. 13-[CSS]-postion位置:相relative,绝absolute,固fixed,static(默认),z-index

    1.postion位置属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 【bzoj1066】【luogu2472】[SCOI2007]蜥蜴

    1066: [SCOI2007]蜥蜴 Time Limit: 1 Sec  Memory Limit: 162 MB Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上 ...

  8. sqlmap注入分类

    注入分法不同,种类不同,来个简单的分类: 1.get型:sqlmap -u “http://xxx.xx.xxx/xx.xxx?xx=xxx”  2.post型: sqlmap -u “http:// ...

  9. Jmeter+Badboy安装使用文档

                  Jmeter+Badboy安装使用文档       目录   1.jmeter安装    1 2.Jmeter基础使用    3 3. 使用Jmeter进行分布式测试    ...

  10. A* 寻路的八个变种

    变种 1 - 束搜索(Beam Search) 在 A* 算法的住循环中,OPEN 集存储可能需要搜索的节点,用来以查找路径. 束搜索是 A* 的变体,它限制了OPEN集的大小. 如果集合变得太大,则 ...