显示用户选择文件【图片】实现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
原文地址：https://www.cnblogs.com/zjf-1992/p/8282449.html
时间： 2024-10-29 15:40:17