首页 > 编程语言 > 详细

使用JavaScript 操作本地文件

时间:2018-01-14 12:43:35      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:change   sar   参数   eight   modified   filename   get   img   back   

显示用户选择文件【图片】实现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

    http://javascript.ruanyifeng.com/htmlapi/file.html

使用JavaScript 操作本地文件

标签:change   sar   参数   eight   modified   filename   get   img   back   

原文:https://www.cnblogs.com/zjf-1992/p/8282449.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号