HTML 5 使用 FileReader、FormData实现文件上传

时间 2019-11-19

标签 html 使用 filereader formdata 实现文件上传栏目 HTML 繁體版

原文原文链接

1、FileReaderhtml

FileReader 对象容许Web应用程序异步读取存储在用户计算机中的文件（或缓冲区的原始数据），使用File或Blob对象指定要读取的文件或数据。web

1.1 实例化数组

var reader = new FileReader()app

1.2 事件类型异步

FileReader.onloadthis
- 每次成功完成读取操做完成时触发loading事件 spa
FileReader.onprogressscala
- 读取Blob 内容时触发进度 progress 事件code

1.3 方法orm

FileReader.readAsDataURL()
- 开始读取指定的Blob内容，完成后，result 属性包含一个用URL表示的文件数据。

FileReader.readAsArrayBuffer()

开始读取指定的Blob内容，完成后，result 属性包含一个用 ArrayBuffer 表示的文件数据。

HTML

 
           <input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview..."
JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
} 
          

FileReader.readAsText()
- 开始读取指定的Blob内容，完成后，result 将文件的内容做为一个文本字符串。

2、在Web 应用中使用files对象

2.1 访问所选文件

 
      <input multiple id="upload_input" type="file" accept="image/*" /> 
     
      使用原生DOM选择器获取元素 
     
      var files = document.getElementById('upload_input').files;

files 是一个对象，包含着所选文件列表的信息和一个 length 属性

 
       > console.log(files);
< FileList {0: File, 1: File, 2: File, length: 3}
<FileList
    0:File
        lastModified:1481789988885
        lastModifiedDate:Thu Dec 15 2016 16:19:48 GMT+0800 (中国标准时间)
        name:"my_order.png"
        size:93453
        type:"image/png"
        webkitRelativePath:""
    1:File
    2:File
    length:3 
      

2.2 经过change 事件访问所选文件

var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
    var fileList = this.files; /* now you can work with the file list */
}

2.3 获取所选文件的基本信息

访问files对象的自带的length属性，获得被选择文件的个数：

var numFiles = files.length;

能够经过数组列表，检索出被选择的单个文件：

 
       for (var i = 0, numFiles = files.length; i < numFiles; i++) {
  var file = files[i];
  ..
} 
      

每一个 file 对象拥有三个属性，包含着文件的name,size,type

name：文件名，只读，不包含文件路径；

size：文件字节数，64-bit 整型；例如92kb 的文件，它的size = 92 * 1024 b;

type：文件的MIME类型，若不肯定则为“”（空）。

2.4 使用click 方法隐藏 input 元素

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>

给隐藏的 input 增长事件

 
       var fileSelect = document.getElementById('fileSelect'),
    fileEle = document.getElementById('fileElem');
fileSelect.addEventListener('click', function(e) {
    if(fileEle) {
        fileEle.click();
    }
}, false) 
      

3、实例

3.1 显示用户选中图片的缩略图

var showThumbnails = function (files) {
    for(var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /^image\//;

        if(!imageType.test(file.type)) {
            continue;
        }
        var img = document.createElement('img');
        img.classList.add('obj');
        img.file = file;
        preview.appendChild(img); // 假设preview是缩略图的展现位置

        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result; // e.target 指向 reader
            }
        })(img)
    }
}

每一个缩略图都添加了一个 obj 的类名，方便后期查找。还向每一个图像指定了一个指向文件的file属性，以供稍后实际上传，而后用Node.appendChild() 将新的缩略图添加到预览区域。

紧接着，咱们实例化了一个 FileReader 来处理异步加载图像并将其附加到img 元素上。调用readAsDataURL() 在后台启动读取操做，图像加载完毕，它们将被转换为传递给onload回调的数据：URL。

 
       <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title></title>
</head>
<body>
<div class="logo">
    <img src="111.png" />
</div>
<div class="upload">
    <p>上传图片</p>
    <form>
        <input multiple id="upload_input" type="file" />
    </form>
</div>
</body>
<script>
    window.onload = function () {
        var Upload = {
            change: function () {
                var oform = document.querySelector('form'),
                    oFiles = document.getElementById('upload_input').files;
                console.log(oFiles)
                for(var key in oFiles) {
                    if(oFiles.hasOwnProperty(key)) {
                        console.log('file_name:'+oFiles[key].name);
                        console.log('file_size:'+oFiles[key].size);
                        console.log('file_type:'+oFiles[key].type);
                    }
                }
            }
        };
        document.getElementById('upload_input').addEventListener('change',Upload.change);
    }
</script>
</html> 
      