使用JavaScript 操作本地文件
一、显示用户选择【图片】实现code如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript显示用户选取的图片</title>
</head>
<body>
<div>
<input type="file" name="picture" onchange="selectPicture(this)"
accept="image/gif,image/jpeg,image/jpg,image/png" />
<img src="" width="240px" id="image"/>
</div>
<script type="text/javascript">
function selectPicture(evt){
if (!evt.files || !evt.files[0]) {
return;
}
console.log(evt.files);
var fileName = evt.files[0].name, //文件名,该属性只读
fileSize = evt.files[0].size, //文件大小,单位为字节，该属性只读;(1KB = 1024Bytes; 1MB = 1024KB)
fileType = evt.files[0].type; //文件类型 文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
console.log("文件总的大小"+fileSize);
//FileReader包含了一套完整的事件模型，用来捕获读取文件时的状态：
var reader = new FileReader();
//onerror 文件读取出错
reader.onerror = function(){
console.log("文件读取出错...");
}
//文件读取中
reader.onprogress = function(evt){
console.log(evt);
console.log(evt.loaded); //当前文件读取进度
console.log("文件读取中...");
if(evt.lengthComputable){
//当前上传进度
console.log(Math.round((evt.loaded/fileSize)*100)+"%");
}
}
//文件读取成功完成时触发
reader.onload = function (evt) {
document.getElementById('image').src = evt.target.result;
}
//将文件读取为DataURL 返回一个基于Base64编码的data-uri对象
reader.readAsDataURL(evt.files[0]);
}
</script>
</body>
</html>
上述打印 evt.files日志log信息
File 提供有关文件的信息，并允许网页中的 JavaScript 访问其内容
FileList 对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件
有关File文件对象几个属性
lastModified 返回当前 File 对象所引用文件最后修改时间(单位：毫秒数; 属性：只读);
type 返回文件的 多用途互联网邮件扩展类型(属性：只读);
name 返回当前 File 对象所引用文件的名字(属性：只读);
size 返回文件的大小(属性：只读);
webkitRelativePath 返回 File 相关的 path 或 URL(属性：只读);
lastModifiedDate 返回当前 File 对象所引用文件最后修改时间的 Date 对象 (属性：只读);
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据
onerror 文件读取出错
onprogress 文件读取中
onload 文件读取成功完成时触发
readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。
上述 FileReader 对象虽然存在 reader.onprogress = function(evt){} 文件读取进度展示；文件的都是从内存中读取；
reader.onload=function（evt）{} 是整个文件读取完成后才触发的；若该文件上传至服务端（前提是整个文件读取完成）就好比只有蓄水池装满水情况下，饮用的水的人才能喝到；
在这种情况下若文件很大情，用户体验很不好；这时就需要利用Blob.slice方法进行文件分割上传（蓄水池只要有水，饮用水的人就能喝到）；
二、文件分割上传（使用Blob.slice()分割方法）
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
var blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);
三、文件下载
function download(){ //文件下载
var blob = new Blob(["This download file content......"]); //Blob {size: 0, type: ""}; size 字节 type 类型
var a = document.createElement('a');
// 用blob 对象来创建一个 object URL(它是一个 DOMString)，
//我们可以用这个 object URL 来表示某个 blob 对象，这个 object URL 可以用在 href 和 src 之类的属性上
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = "picture.txt"; //文件下载名称
a.click();
//释放由 createObjectURL 创建的 object URL
window.URL.revokeObjectURL(url);
}
2018-01-26 11:16:56 注意【a.download 指定下载文件名，前端多次调试但并没生效】原因后端重新设置下载文件名
response.setHeader("Content-Disposition","attachment;filename="+file_name);
try {
response.setContentType("application/octet-stream");
response.setHeader("Content-disposition", "attachment;"); //设置下载文件名
response.setHeader("Content-Length", String.valueOf(fileLength));
bos = new BufferedOutputStream(response.getOutputStream());
byte[] buff = new byte[2048];
int bytesRead;
while (-1 != (bytesRead = bis.read(buff, 0, buff.length))) {
bos.write(buff, 0, bytesRead);
}
} catch (IOException e) {
e.printStackTrace();
}
资料参考
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications#
http://javascript.ruanyifeng.com/htmlapi/file.html
https://segmentfault.com/a/1190000005863250
使用JavaScript 操作本地文件的更多相关文章
- JavaScript中ActiveXObject操作本地文件夹
在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. <!DOCTYPE HTM ...
- JavaScript中使用ActiveXObject操作本地文件夹的方法
转载地址 http://www.jb51.net/article/48538.htm 在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实 ...
- js操作本地文件
只有IE支持js对本地文件操作 其他浏览器都不支持
- javascript读取本地文件
由于浏览器考虑到安全问题,在修改本地文件方面除了IE几乎都不支持. IE例子 //读文件 function readFile(filename){ var fso = new ActiveXObjec ...
- 【转】JavaScript中使用ActiveXObject操作本地文件夹的方法
原文链接:http://www.jb51.net/article/48538.htm
- servlet操作本地文件汇总： 判断文件是否存在；文件重命名；文件复制； 获取文件属性信息，转成Json对象； 获取指定类型的文件； 查找替换.txt中的文本
package servlet; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; ...
- javascript 学习笔记 -- js获取本地文件信息
JavaScript是跑在浏览器中,所以对于JavaScript读取本地文件不想c++ 和 java那样easy.网上有很多关于读取本地文件的方法,许多是用ActiveXObject控件.Active ...
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...
- WinForm中使用XML文件存储用户配置及操作本地Config配置文件
大家都开发winform程序时候会大量用到配置App.config作为保持用户设置的基本信息,比如记住用户名,这样的弊端就是每个人一些个性化的设置每次更新程序的时候会被覆盖. 故将配置文件分两大类: ...
随机推荐
- HDU 1715 大菲波数
/* 中文题意: 中文翻译: 题目大意:求1000以内的菲波数. 解题思路:用大数来计算.用二维数组来存数. 难点具体解释:用二维数组存数,開始的一维存的是1000个Pi,后面那一维是用来存数字的. ...
- 关于IntelliJ IDEA有时候快捷键无效的说明
1.这个原因最大的因素可能就是 搜狗输入法了, 关闭搜狗输入法,ok, 2.也可能是qq快捷键冲突,关闭它. 3.也可能是搜狗输入法快捷键冲突,关闭它.
- List集合在遍历过程中的删除
List集合在遍历过程中的删除:[1,1,2,3,4,5] for循环正续会漏掉一个1 for(int i=0;i<list.size();i++){ if(list.get(i).equals ...
- 《奇思妙想：15位计算机天才及其重大发现》【PDF】下载
<奇思妙想:15位计算机天才及其重大发现>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196328 内容简介 本书介绍了15位当代 ...
- 《大型网站技术架构：核心原理与案例分析》【PDF】下载
<大型网站技术架构:核心原理与案例分析>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062557 内容简介 本书通过梳理大型网站 ...
- jQuery对表单元素的取值和赋值操作代码（转）
使用常规的思路:$("#keyword").value 取值是取不到的,因为此时$('#keydord')已经不是个element,而是个jquery对象,所以应该使用:$(&qu ...
- jemeter——badboy导入的jmx文件自带元件解析
线程组设置与解析 含义:1秒启动100个线程,每个线程循环调用20次请求 (包括FTP请求.Java请求.http请求,根据你提交的请求而定) delay thread creation until ...
- BZOJ1036 (其实这只是一份板子)
我说我是不是完蛋了啊... ...昨天考试线段树写错,调了好久才调回来:今天做这道树链剖分辣鸡操作题,TM写错了4个地方!先是建树为了省常数打了一个build结果初值赋错了,然后又是线段树!getma ...
- java-FFmpeg（一） 实现视频的转码和截图功能
FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库l ...
- Golang fmt包使用小技巧
h1 { margin-top: 0.6cm; margin-bottom: 0.58cm; direction: ltr; color: #000000; line-height: 200%; te ...