使用JavaScript 操作本地文档

显示用户选择文档【图片】实现code如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>JavaScript显示用户选取的图片</title>
 6 </head>
 7 <body>
 8    <div>
 9      <input type="file" name="picture" onchange="selectPicture(this)" 
10     accept="image/gif,image/jpeg,image/jpg,image/png" />
11      <img src="" width="240px" id="image"/>
12    </div>
13    <script type="text/javascript">
14            function selectPicture(evt){
15             if (!evt.files || !evt.files[0]) {
16                 return;
17             }
18             console.log(evt.files);
19             var fileName = evt.files[0].name,  //文档名,该属性只读
20                 fileSize = evt.files[0].size,  //文档大小,单位为字节,该属性只读;(1KB = 1024Bytes; 1MB = 1024KB)    
21                 fileType = evt.files[0].type; //文档类型 文档的MIME类型,如果分辨不出类型,则为空字符串,该属性只读。
22             console.log("文档总的大小"+fileSize);
23             //FileReader包含了一套完整的事件模型,用来捕获读取文档时的状态:
24             var reader = new FileReader();
25                //onerror 文档读取出错
26                reader.onerror = function(){
27                    console.log("文档读取出错...");
28                }
29                //文档读取中
30                reader.onprogress = function(evt){
31                    console.log(evt);
32                    console.log(evt.loaded); //当前文档读取进度
33                    console.log("文档读取中...");
34                    if(evt.lengthComputable){
35                       //当前上传进度
36                       console.log(Math.round((evt.loaded/fileSize)*100)+"%");
37                    }
38                }
39                //文档读取成功完成时触发
40                 reader.onload = function (evt) {
41                     document.getElementById('image').src = evt.target.result;
42                     console.log(fileName);
43                     console.log(fileSize);
44                     console.log(fileType);
45                 }
46                 //将文档读取为DataURL  返回一个基于Base64编码的data-uri对象
47                 reader.readAsDataURL(evt.files[0]);
48            }
49    </script>
50 </body>
51 </html>
52 
53     
上述打印 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对象。

 资料参考 

    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

关键词:文档 evt lt gt file nbsp 读取 对象 log 返回

相关推荐:

React读取Excel——js-xlsx 插件的使用

JavaScript 文档对象详解

前端本地文档操作与上传1

如何使用File APIs来读取文档

[转]文档file属性详解

HTML5新特性之文档和二进制数据的操作

Node js文档系统

前端本地文档操作与上传