Html5进阶 文件系统

在javascript的世界里无法处理二进制数据，如果需要处理，只能使用charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成Base64编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript 5引入了Blob对象，允许直接操作二进制数据。

1 Blob对象

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。

生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。
（1）Blob构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。

var htmlParts = ["hey!<\/b><\/a>"];
var myBlob = new Blob(htmlParts, { "type" : "text\/xml" });

下面是一个利用Blob对象，生成可下载文件的例子。

var a = document.createElement("a");
a.href = window.URL.createObjectURL(myBlob);
a.download = "hello-world.txt";
a.textContent = "Download Hello World!";

body.appendChild(a);

上面的代码生成了一个超级链接，点击后提示下载文本文件hello-world.txt，文件内容为“Hello World”。

（2）Blob对象的slice方法，将二进制数据按照字节分块，返回一个新的Blob对象。

var newBlob = oldBlob.slice(startingByte, endindByte);

下面是一个使用XMLHttpRequest对象，将大文件分割上传的例子。

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(blobOrFile);
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  var blob = this.files[0];

  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
  const SIZE = blob.size;

  var start = 0;
  var end = BYTES_PER_CHUNK;

  while(start < SIZE) {
    upload(blob.slice(start, end));

    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);
});

这里有个小问问题，分片上传每次流量为1024*1024，也就是1m，最后一次上传的量需要单独计算，不一定刚好为1m。

var totalSize = file.size  //获取file的大小  单位字节
var perchunk = 1024*1024,strart = 0,end = perchunk;
var count = totalSize % perchunk == 0 ? totalSize/perchunk : Math.floor(totalSize/perchunk) + 1   //需要上传的次数
var index = 0;
while(index < count ){
         if(index == count -1){
             upload(start , totalSize)
         }else{
             upload(start , end)
         }
         start = end
         end = start + perchunk
         index ++
}

这样写才能保证数据正确的传输

3）Blob对象有两个只读属性：

size：二进制数据的大小，单位为字节。
type：二进制数据的MIME类型，全部为小写，如果类型未知，则该值为空字符串。

下面展示一段我学习blob的代码

  
Reading a Binary Large Object (blob)
  
Displays file data between a starting byte value and ending byte value.
  
Select a file:
  

  

    
  
    
Enter byte range:
    
 Start byte (counting from the 0th byte).
    
 End byte (counting from the 0th byte).
    
Show File Content for Byte Range
    

    

  
  

js代码

var globals = 
        {
          selectedFile: null,
          fileSize: 0 
        };
    window.addEventListener('load', init, false);
    
    // 检测是否支持filereader，下面会讲到
    function fileApiSupportCheck() {
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        // All the File APIs are supported.
      }
      else {
        document.getElementById('alert').innerHTML = '
FILE APIs NOT FULLY SUPPORTED - UPDATE YOUR BROWSER
';
      }
    }

 function init() {
      fileApiSupportCheck();
      document.getElementById('fileInput').addEventListener('change', fileInputHandler, false);
      document.getElementById('byteRangeButton').addEventListener('click', byteRangeButtonHandler, false);
    }

//文件上传回调函数
function fileInputHandler(evt) {
      var f = evt.target.files[0]; // The solo file selected by the user.

      if (!f.size) {
        document.getElementById('alert').innerHTML = 'Please select a file (that contains some content).';
        return;
      }

      globals.selectedFile = f;
      globals.fileSize = f.size;

      document.getElementById('byteCount').innerHTML = '
' + f.name + ' (' + (f.type || 'n/a') + ') = ' + f.size + ' bytes
';
      document.getElementById('hidder').style.visibility = "visible"; // We've selected a valid file and can now safely show the byte range input markup.
    }

function byteRangeButtonHandler() {
      var start = Number(document.getElementById('byteStart').value);
      var end = Number(document.getElementById('byteEnd').value);
      readBlob(start, end);
    }

(4) 普及一个知识
通过canvas绘制的图片可以和blob在一起使用

var canvas = document.getElementById('canvas');

canvas.toBlob(function(blob) {
  var newImg = document.createElement('img'),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

Note that here we're creating a PNG image; if you add a second parameter to the toBlob() call, you can specify the image type. For example, to get the image in JPEG format:
大概意思是说默认是png的格式，我们可以手动制定格式类型。

canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality

我们讲了这么多blob对象的知识，那么它的应用何在，我们接着看

2 FileList对象

File API提供File对象，它是FileList对象的成员，包含了文件的一些元信息，比如文件名、上次改动时间、文件大小和文件类型。

var selected_file = document.getElementById('input').files[0];

var fileName = selected_file.name;
var fileSize = selected_file.size;
var fileType = selected_file.type;

File对象的属性值如下。

name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为Date对象实例。

我们聊了这么多，无非就是想在文件上传的过程中使用这些api，那么还要继续学习。

3 FileReader API

FileReader API用于读取文件，即把文件内容读入内存。它的参数是File对象或Blob对象。

对于不同类型的文件，FileReader提供不同的方法读取文件。

readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。

readAsText方法用于读取文本文件，它的第一个参数是File或Blob对象，第二个参数是前一个参数的编码方法，如果省略就默认为UTF-8编码。该方法是异步方法，一般监听onload件，用来确定文件是否加载结束，方法是判断FileReader实例的result属性是否有值。其他三种读取方法，用法与readAsText方法类似。

var reader = new FileReader();
reader.onload = function(e) {
  var text = e.target.result;
}
reader.readAsText(file, encoding);

亲测了一遍，这个text在utf-8下是乱码的。

readAsDataURL方法返回一个data URL，它的作用基本上是将文件数据进行Base64编码。你可以将返回值设为图像的src属性。

var file = document.getElementById('destination').files[0];
if(file.type.indexOf('image') !== -1) {
  var reader = new FileReader();
  reader.onload = function (e) {
    var dataURL = e.target.result;
  }
  reader.readAsDataURL(file);
}

dataURL是一段base64编码的url。

什么是 base64 编码?
我不是来讲概念的，直接切入正题，图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

那么为什么要使用 base64 传输图片文件？上文也有提及，因为这样可以节省一个 http 请求。图片的 base64 编码可以算是前端优化的一环。效益虽小，但却能积少成多。

readAsBinaryString方法可以读取任意类型的文件，而不仅仅是文本文件，返回文件的原始的二进制内容。这个方法与XMLHttpRequest.sendAsBinary方法结合使用，就可以使用JavaScript上传任意文件到服务器。

var reader = new FileReader();
reader.onload = function(e) {
  var rawData = reader.result;
}
reader.readAsBinaryString(file);

FileReader对象采用异步方式读取文件，可以为一系列事件指定回调函数。

onabort方法：读取中断或调用reader.abort()方法时触发。
onerror方法：读取出错时触发。
onload方法：读取成功后触发。
onloadend方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
onloadstart方法：读取将要开始时触发。
onprogress方法：读取过程中周期性触发。

下面是一个onprogress事件回调函数的例子，主要用来显示读取进度。

var reader = new FileReader();
reader.onprogress = updateProgress;

function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentLoaded = Math.round((evt.loaded / evt.totalEric Bidelman) * 100);
    var progress = document.querySelector('.percent');
    if (percentLoaded < 100) {
      progress.style.width = percentLoaded + '%';
      progress.textContent = percentLoaded + '%';
    }
  }
}

下面跟大家讲一个很重要的知识点，拖拽文件上传的实现，相信大家在qq里面已经用到过。

     DROP FILES HERE FROM FINDER OR EXPLORER

在新的html5 api里面有关于拖拽讲解的，这里就不说了，大家可以自行google。

function dodrop(event)
{
  var dt = event.dataTransfer;
  var files = dt.files;

  var count = files.length;
  output("File Count: " + count + "\n");

    for (var i = 0; i < files.length; i++) {
      var fileReader = new fileReader()
      fileReader.onload = function(e){
            document.createElement('.img').src = e.target.result
      }
      fileReader.readAsDataURL(files[i])
      output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " +
             files[i].name + " " + files[i].size + "\n");
    }
}

function output(text)
{
  document.getElementById("output").textContent += text;
  //dump(text);
}

在ondrop事件上通过event.dataTransfer获取files对象。

4 文件断点续传

            
            
            

                

                    

                        
文件名
                        
文件类型
                        
文件大小
                        
上传进度
                        

                            
                        
                    
                
                

                
            
        
        
        

// 选择文件-显示文件信息
            $('#myFile').change(function(e) {
                var file,
                    uploadItem = [],
                    uploadItemTpl = $('#file-upload-tpl').html(),
                    size,
                    percent,
                    progress = '未上传',
                    uploadVal = '开始上传';

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

                    percent = undefined;
                    progress = '未上传';
                    uploadVal = '开始上传';

                    // 计算文件大小
                    size = file.size > 1024
                        ? file.size / 1024  > 1024
                        ? file.size / (1024 * 1024) > 1024
                        ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
                        : (file.size / (1024 * 1024)).toFixed(2) + 'MB'
                        : (file.size / 1024).toFixed(2) + 'KB'
                        : (file.size).toFixed(2) + 'B';

                    // 初始通过本地记录，判断该文件是否曾经上传过
                    percent = window.localStorage.getItem(file.name + '_p');

                    if (percent && percent !== '100.0') {
                        progress = '已上传 ' + percent + '%';
                        uploadVal = '继续上传';
                    }

                    // 更新文件信息列表
                    uploadItem.push(uploadItemTpl
                        .replace(/{{fileName}}/g, file.name)
                        .replace('{{fileType}}', file.type || file.name.match(/\.\w+$/) + '文件')
                        .replace('{{fileSize}}', size)
                        .replace('{{progress}}', progress)
                        .replace('{{totalSize}}', file.size)
                        .replace('{{uploadVal}}', uploadVal)
                    );
                }

                $('#upload-list').children('tbody').html(uploadItem.join(''))
                    .end().show();
            });

当选择文件后，我们把信息渲染到了table列表里面了。当我们单独点击某个文件后该文件就开始上传。

$(document).on('click', '.upload-item-btn', function() {
                var $this = $(this),
                    state = $this.attr('data-state'),
                    msg = {
                        done: '上传成功',
                        failed: '上传失败',
                        in: '上传中...',
                        paused: '暂停中...'
                    },
                    fileName = $this.attr('data-name'),
                    $progress = $this.closest('tr').find('.upload-progress'),
                    eachSize = 1024,
                    totalSize = $this.attr('data-size'),
                    chunks = Math.ceil(totalSize / eachSize),
                    percent = window.localStorage.getItem(fileName + '_percent') || 0;
                    chunk = window.localStorage.getItem(fileName + '_chunk') || 0;
                    // 暂停上传操作
                    isPaused = 0;

                // 进行暂停上传操作
                // 未实现，这里通过动态的设置isPaused值并不能阻止下方ajax请求的调用
                if (state === 'uploading') {
                    $this.val('继续上传').attr('data-state', 'paused');
                    $progress.text(msg['paused'] + percent + '%');
                    window.localStorage.setItem(fileName + '_status','0');
                    isPaused = 1;
                    console.log('暂停：', isPaused);
                }
                // 进行开始/继续上传操作
                else if (state === 'paused' || state === 'default') {
                    $this.val('暂停上传').attr('data-state', 'uploading');
                    window.localStorage.setItem(fileName + '_status','1');
                    isPaused = 0;
                }

                // 第一次点击上传
                if(ispaused == 0)
                      startUpload(chunk);

                // 上传操作 times: 第几次
                function startUpload(chunk) {
                    // 上传之前查询是否以及上传过分片
                    chunk = parseInt(chunk, 10);
                    // 判断是否为末分片
                    var    isLastChunk = (chunk == (chunks - 1) ? 1 : 0);

                    // 如果第一次上传就为末分片，即文件已经上传完成，则重新覆盖上传
                    if (times === 'first' && isLastChunk === 1) {
                        window.localStorage.setItem(fileName + '_chunk', 0);
                        chunk = 0;
                        isLastChunk = 0;
                    }
                    
                    
                    // 设置分片的开始结尾
                    var    blobFrom = chunk * eachSize, // 分段开始
                        blobTo = (chunk + 1) * eachSize > totalSize ? totalSize : (chunk + 1) * eachSize, // 分段结尾
                        percent = (100 * blobTo / totalSize).toFixed(1), // 已上传的百分比
                        timeout = 5000, // 超时时间
                        fd = new FormData($('#myForm')[0]);

                    fd.append('theFile', findTheFile(fileName).slice(blobFrom, blobTo)); // 分好段的文件
                    fd.append('fileName', fileName); // 文件名
                    fd.append('totalSize', totalSize); // 文件总大小
                    fd.append('isLastChunk', isLastChunk); // 是否为末段
                    fd.append('isFirstUpload', times === 'first' ? 1 : 0); // 是否是第一段（第一次上传）

                    // 上传
                    $.ajax({
                        type: 'post',
                        url: '/fileTest.php',
                        data: fd,
                        processData: false,
                        contentType: false,
                        timeout: timeout,
                        success: function(rs) {
                            rs = JSON.parse(rs);

                            // 上传成功
                            if (rs.status === 200) {
                                // 记录已经上传的百分比
                                window.localStorage.setItem(fileName + '_p', percent);

                                // 已经上传完毕
                                if (chunk === (chunks - 1)) {
                                    $progress.text(msg['done']);
                                    $this.val('已经上传').prop('disabled', true).css('cursor', 'not-allowed');
                                    if (!$('#upload-list').find('.upload-item-btn:not(:disabled)').length) {
                                        $('#upload-all-btn').val('已经上传').prop('disabled', true).css('cursor', 'not-allowed');
                                    }
                                } else {
                                    // 记录已经上传的分片
                                    window.localStorage.setItem(fileName + '_chunk', ++chunk);

                                    $progress.text(msg['in'] + percent + '%');
                                    // 每回再次执行，需要判断状态值
                                    
                                    if (window.localStorage.getItem(fileName + '_status') == 1) {
                                        startUpload(chunk++);
                                    }

                                }
                            }
                            // 上传失败，上传失败分很多种情况，具体按实际来设置
                            else if (rs.status === 500) {
                                $progress.text(msg['failed']);
                            }
                        },
                        error: function() {
                            $progress.text(msg['failed']);
                        }
                    });
                }
            });

我们这里需要注意一个问题，点击暂停后改变了状态paused = 1，在localstorage里面设置了_status为0，那么之前的ajax请求就需要判断每次请求的状态值是否为1，为1才会在回调中递归执行。

FormData 对象的使用

通过FormData对象可以组装一组用 XMLHttpRequest
发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同

举个例子说明吧

我们通过post方法向服务器提交数据，其实我还可以不写action就是提交地址。

var formData = new FormData($('#myForm'));
var request = new XMLHttpRequest();
request.open("POST", "fileTest.php");
request.send(formData);

使用FormData对象上传文件

  Your email address:
  

  Custom file label:
  

  File to stash:
  
  

然后使用下面的代码发送请求：

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.
";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

构造的formdata可以通过append添加额外数据。注意也可以append blob对象。

最后说一下formdata的使用场景：

使用jquery的serializeArray函数，但是这个方法对于input[type="file"]是无效的，FormData可以用来处理带有multipart/form-data编码类型的表单，一般都是带有input[type="file"]的表单.

大家有兴趣自己可以去看下表单提交的知识，有时间我会讲一期专题。