HTML5——读取文件FileReader对象上传文件

谁借莪１个温暖的怀抱￠ 2022-05-11 08:26 522阅读 0赞
  1. 方法：

（1）abort()方法：终止读取

（2）readAsText(file，[encoding])方法：将文件读取为文本

（3）readAsBinaryString(file)方法：将文件读取为二进制编码

（4）readAsDataURL(file)方法：将文件读取为DataURL编码

（5）readAsArrayBuffer(file)方法：将文件读取为arraybuffer，传给后台，需要接口

  1. 事件

（1）onloadstart事件：读取开始时触发

（2）onprogress事件：读取中触发

（3）onloadend事件：读取完成时触发，无论成功还是失败

（4）onload事件：文件读取完成时触发

（5）onabort事件：中断时触发

（6）onerror事件：出错时触发

读取完成后的结果要传给后台，如何获取读取结果：

result属性是读取的结果，然后将获取的结果通过ajax发送给后台

实例：将文件拖拽进浏览器，并上传到后端

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  9.         #drop_area{
  10.             width: 300px;
  11.             height: 200px;
  12.             background: orange;
  13.         }
  14.         #progress{
  15.             display: inline-block;
  16.             margin-top: 10px;
  17.             border-radius: 15px;
  18.             width: 200px;
  19.             height: 20px;
  20.             border: 1px solid #888;
  21.             overflow: hidden;
  22.         }
  23.         #val{
  24.             width: 0;
  25.             height: 20px;
  26.             background: #ccc;
  27.             border-radius: 15px;
  28.         }
  30.     </style>
  31. </head>
  33. <body>
  34.     <!-- <button id="paused">暂停</button> -->
  35.     <div id="drop_area">将图片拖拽到此区域</div>
  36.     <div id="progress">
  37.         <div id="val"></div>
  38.     </div>
  39.     <span id="num">0%</span>
  40.     <div id="preview"></div>
  42.     <script src="./loadFile.js"></script>
  43.     <script src="./ajax.js"></script>
  44.     <script>
  45.            var events = {
  46.                 load: function (data) {
  47.                     console.log(data);
  48.                     ajax('post', 'http://localhost/HTML5/drag/drag-fileReader/upload.php', cb, data, true);
  49.                 },
  50.                 progress: function (percent) {
  51.                     val.style.width = percent * 2 + 'px';
  52.                     num.innerHTML = Math.round(percent)+ '%';
  53.                 },
  54.                 success: function () {
  55.                     console.log('success');
  56.                 }
  57.             };
  58.             function cb() {
  59.                 console.log('ss')
  60.             }
  61.             drop_area.addEventListener('dragover', function(e) {
  62.                 e.preventDefault();
  63.             })
  64.             var loader;
  65.             drop_area.addEventListener('drop', function(e) {
  66.                 e.preventDefault();
  67.                 var file = e.dataTransfer.files[0];
  68.                 loader = new FileLoader(file, events);
  69.             })
  71.             // document.getElementById('paused').onclick = function () {
  72.             //     loader.abort();
  73.             // }
  74.         </script>
  75. </body>
  76. </html>
  78. /*
  79. * 文件读取模块
  80. * file  文件对象
  81. * events 事件回掉对象 包含 success , load, progress
  82. */
  83. var FileLoader = function (file, events) {
  84.     this.reader = new FileReader();
  85.     this.file = file;
  86.     this.loaded = 0;
  87.     this.total = file.size;
  88.     //每次读取1M
  89.     this.step = 1024 * 1024;
  90.     this.events = events || {};
  91.     //读取第一块
  92.     this.readBlob(0);
  94.     this.bindEvent();
  96. }
  98. FileLoader.prototype = {
  99.     bindEvent: function (events) {
  100.         var _this = this,
  101.             reader = this.reader;
  103.         reader.onload = function (e) {
  104.             _this.onLoad();
  105.         };
  107.         reader.onprogress = function (e) {
  108.             _this.onProgress(e.loaded);
  109.         };
  111.         // start 、abort、error 回调暂时不加
  112.     },
  113.     // progress 事件回掉
  114.     onProgress: function (loaded) {
  115.         var percent,
  116.             handler = this.events.progress;
  118.         this.loaded += loaded;
  119.         percent = (this.loaded / this.total) * 100;
  120.         handler && handler(percent);
  121.     },
  122.     // 读取结束（每一次执行read结束时调用，并非整体）
  123.     onLoad: function () {
  124.         var handler = this.events.load;
  126.         // 应该在这里发送读取的数据
  127.         handler && handler(this.reader.result);
  131.         // 如果未读取完毕继续读取
  132.         if (this.loaded < this.total) {
  133.             this.readBlob(this.loaded);
  134.         } else {
  135.             // 读取完毕
  136.             this.loaded = this.total;
  137.             // 如果有success回掉则执行
  138.             this.events.success && this.events.success();
  139.         }
  140.     },
  141.     // 读取文件内容
  142.     readBlob: function (start) {
  143.         var blob,
  144.             file = this.file;
  146.         // 如果支持 slice 方法，那么分步读取，不支持的话一次读取
  147.         if (file.slice) {
  148.             blob = file.slice(start, start + this.step);
  149.         } else {
  150.             blob = file;
  151.         }
  153.         this.reader.readAsText(blob);
  154.     },
  155.     // 中止读取
  156.     abort: function () {
  157.         var reader = this.reader;
  159.         if(reader) {
  160.             reader.abort();
  161.         }
  162.     }
  163. }
  165. function ajax(method, url, callback, data, flag) {
  166.     var xhr = null;
  167.     if(window.XMLHttpRequest) {
  168.         xhr =  new XMLHttpRequest();
  169.     }else {
  170.         xhr = new ActiveXObject('Microsoft.XMLHttp')
  171.     }
  172.     xhr.onreadystatechange = function() {
  173.         if(xhr.readyState == 4) {
  174.             if(xhr.status == 200) {
  175.                 callback(xhr.responseText);
  176.             }else {
  177.                 console.log('error');
  178.             }
  179.         }
  180.     }
  181.     method = method.toUpperCase();
  182.     if(method == 'GET') {
  183.         var date = new Date(),
  184.             timer = date.getTime();
  185.         xhr.open(method, url + '?' + data + '&timer=' + timer, flag);
  186.         xhr.send();
  187.     }else if(method == 'POST') {
  188.         xhr.open(method, url, flag);
  189.         xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  190.         xhr.send(data);
  191.     }
  192. }
  194. <?php
  195. $mypic = $_FILES["mypic"];
  196. if(!empty($mypic)){
  197.     $picname = $_FILES['mypic']['name'];
  198.     $picsize = $_FILES['mypic']['size'];
  199.     if ($picsize > 512000) {
  200.         echo '图片大小不能超过500k';
  201.         exit;
  202.     }
  203.     $type = strstr($picname, '.');
  204.     // if ($type != ".gif" && $type != ".jpg") {
  205.     //     echo '图片格式不对！';
  206.     //     exit;
  207.     // }
  208.     $pics = 'helloweba' . $type;
  209.     //上传路径
  210.     $pic_path = "pics/". $pics;
  211.     move_uploaded_file($mypic["tmp_name"],$pic_path);
  212. }
  213. ?>

70

出现问题：打印出的data值是文件的内容，但是中文内容乱码，而英文正常。

load: function (data) {

console.log(data);

ajax(‘post’, ‘http://localhost/HTML5/drag/drag-fileReader/upload.php‘, cb, data, true);

},

70 1

实例：点击上传文件，浏览器获得文件信息，并没有上传到后端功能

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7. </head>
  9. <body>
  10.     <form>
  11.         <fieldset>
  12.             <legend>分步读取文件：</legend>
  13.             <!-- type类型是file即可获取本地文件 -->
  14.             <input type="file" id="File">
  15.             <input type="button" value="中断" id="Abort">
  16.             <p>
  17.                 <lable>读取进度：</lable>
  18.                 <progress id="Progress" value="0" max="100"></progress>
  19.             </p>
  20.         </fieldset>
  21.     </form>
  22.     <script src="./loadFile.js"></script>
  23.     <script>       
  24.             var progress = document.getElementById('Progress');
  25.             var events = {
  26.                 load: function () {
  27.                     console.log('loaded');
  28.                 },
  29.                 progress: function (percent) {
  30.                     progress.value = percent;
  31.                 },
  32.                 success: function () {
  33.                     console.log('success');
  34.                 }
  35.             };
  36.             var loader;
  38.             // 选择好要上传的文件后触发onchange事件，注意文件发生改变会触发该事件
  39.             document.getElementById('File').onchange = function (e) {
  40.                 var file = this.files[0];
  41.                 console.log(file)
  43.                 //loadFile.js
  44.                 loader = new FileLoader(file, events);
  45.             };
  46.             document.getElementById('Abort').onclick = function () {
  47.                 loader.abort();
  48.             }
  49.         </script>
  50. </body>
  52. </html>
  54. /*
  55. * 文件读取模块
  56. * file  文件对象
  57. * events 事件回掉对象 包含 success , load, progress
  58. */
  59. var FileLoader = function (file, events) {
  60.     this.reader = new FileReader();
  61.     this.file = file;
  62.     this.loaded = 0;
  63.     this.total = file.size;
  64.     //每次读取1M
  65.     this.step = 1024 * 1024;
  66.     this.events = events || {};
  67.     //读取第一块
  68.     this.readBlob(0);
  70.     this.bindEvent();
  72. }
  74. FileLoader.prototype = {
  75.     bindEvent: function (events) {
  76.         var _this = this,
  77.             reader = this.reader;
  79.         reader.onload = function (e) {
  80.             _this.onLoad();
  81.         };
  83.         reader.onprogress = function (e) {
  84.             _this.onProgress(e.loaded);
  85.         };
  87.         // start 、abort、error 回调暂时不加
  88.     },
  89.     // progress 事件回掉
  90.     onProgress: function (loaded) {
  91.         var percent,
  92.             handler = this.events.progress;
  94.         this.loaded += loaded;
  95.         percent = (this.loaded / this.total) * 100;
  96.         handler && handler(percent);
  97.     },
  98.     // 读取结束（每一次执行read结束时调用，并非整体）
  99.     onLoad: function () {
  100.         var handler = this.events.load;
  102.         // 应该在这里发送读取的数据
  103.         handler && handler(this.reader.result);
  107.         // 如果未读取完毕继续读取
  108.         if (this.loaded < this.total) {
  109.             this.readBlob(this.loaded);
  110.         } else {
  111.             // 读取完毕
  112.             this.loaded = this.total;
  113.             // 如果有success回掉则执行
  114.             this.events.success && this.events.success();
  115.         }
  116.     },
  117.     // 读取文件内容
  118.     readBlob: function (start) {
  119.         var blob,
  120.             file = this.file;
  122.         // 如果支持 slice 方法，那么分步读取，不支持的话一次读取
  123.         if (file.slice) {
  124.             blob = file.slice(start, start + this.step);
  125.         } else {
  126.             blob = file;
  127.         }
  129.         this.reader.readAsText(blob);
  130.     },
  131.     // 中止读取
  132.     abort: function () {
  133.         var reader = this.reader;
  135.         if(reader) {
  136.             reader.abort();
  137.         }
  138.     }
  139. }

70 2

注意：下面几个标签的用法

70 3

70 4

发表评论

表情：
评论列表 （有 0 条评论，522人围观）

还没有评论，来说两句吧...

相关阅读