一、显示用户选择【图片】实现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 操作本地文件的更多相关文章

  1. JavaScript中ActiveXObject操作本地文件夹

    在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. <!DOCTYPE HTM ...

  2. JavaScript中使用ActiveXObject操作本地文件夹的方法

    转载地址    http://www.jb51.net/article/48538.htm 在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实 ...

  3. js操作本地文件

    只有IE支持js对本地文件操作 其他浏览器都不支持

  4. javascript读取本地文件

    由于浏览器考虑到安全问题,在修改本地文件方面除了IE几乎都不支持. IE例子 //读文件 function readFile(filename){ var fso = new ActiveXObjec ...

  5. 【转】JavaScript中使用ActiveXObject操作本地文件夹的方法

    原文链接:http://www.jb51.net/article/48538.htm  

  6. servlet操作本地文件汇总： 判断文件是否存在；文件重命名；文件复制； 获取文件属性信息，转成Json对象； 获取指定类型的文件； 查找替换.txt中的文本

    package servlet; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; ...

  7. javascript 学习笔记 -- js获取本地文件信息

    JavaScript是跑在浏览器中,所以对于JavaScript读取本地文件不想c++ 和 java那样easy.网上有很多关于读取本地文件的方法,许多是用ActiveXObject控件.Active ...

  8. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  9. WinForm中使用XML文件存储用户配置及操作本地Config配置文件

    大家都开发winform程序时候会大量用到配置App.config作为保持用户设置的基本信息,比如记住用户名,这样的弊端就是每个人一些个性化的设置每次更新程序的时候会被覆盖. 故将配置文件分两大类: ...

随机推荐

  1. 五：Java之Vector类专题

    据说期末考试要考到Vector 这个类,出于复习须要在这里就要好好整理下这个类了. 一.基本概念 Vector 是可实现自己主动增长的对象数组. java.util.vector提供了向量类(vect ...

  2. Spring定时任务有时候会莫名奇妙的终止？

    最近在是使用Spring配置定时定时任务(基于xml配置使用spring自带的定时任务),一开始使用没什么问题当使用久了就会出现有些定时任务自动停止了.(关于如何使用以及如何它的原理是啥,这里不进行阐 ...

  3. .Net 异步方法， await async 使用

    最近朋友问起await  和 async第一次听说这个await ,就查了一下这个await使用在于 异步方法async 中,中文意思就是等待,经过一系列的百度参考简单的明白了这个东西的意思,  异步 ...

  4. 让你用sublime写出最完美的python代码--windows环境

    至少很长一段时间内,我个人用的一直是pycharm,也感觉挺好用的,也没啥大毛病 但是pycharm确实有点笨重,啥功能都有,但是有很多可能这辈子我也不会用到,并且pycharm打开的速度确实不敢恭维 ...

  5. 《程序设计方法》【PDF】下载

    内容简介 <程序设计方法>主要以方法为主导,结合C语言,把程序设计方法学研究中若干成熟的理论和方法用通俗易懂的语言描述出来.<程序设计方法>还选取趣味性强.技巧性高.能够启发学 ...

  6. scala写算法-快排

    快排算法很经典,今天用scala的函数式思维来整理一下并实现: def qsort(list: List[Int]):List[Int]=list match { case Nil=>Nil c ...

  7. NET Framework 版本和依赖关系

    原文:https://docs.microsoft.com/zh-cn/dotnet/framework/migration-guide/versions-and-dependencies 每个版本的 ...

  8. Linux第三节整理 、增删改查、用户管理

    帮助+基本文件管理+用户管理 1.怎么查看命令帮助 ls --help man ls :查看命令/man 5 file:查看配置文件 2.基本文件管理,通过{查,建,删,改} 四个维度介绍了不同的命令 ...

  9. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  10. Linux下安装破解JIRA 6.3.6 并连接MYSQL5

    序言 JIRA是澳大利亚 Atlassian 公司开发的一款优秀的问题跟踪管理软件工具,可以对各种类型的问题进行跟踪管理,包括缺陷.任务.需求.改进等.JIRA采用J2EE技术,能够跨平台部署.它正被 ...