<input type="file">系列文章一（下）

问题1：enctype是什么？
技巧1：常用小技巧：htmlpreview.github.io  用来预览github上的html页面， 知识获取于：https://www.v2ex.com/t/53076


接下来，我们来看javascript:
var input = document.querySelector('input');
var preview = document.querySelector('.preview');
input.style.opacity = 0;  
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
    }


  var curFiles = input.files;
  if(curFiles.length === 0) {
    var para = document.createElement('p');
    para.textContent = 'No files currently selected for upload';
    preview.appendChild(para);
  } else {
    var list = document.createElement('ol');
    preview.appendChild(list);
    for(var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement('li');
      var para = document.createElement('p');
      if(validFileType(curFiles[i])) {
        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
        var image = document.createElement('img');
        image.src = window.URL.createObjectURL(curFiles[i]);


        listItem.appendChild(image);
        listItem.appendChild(para);


      } else {
        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
        listItem.appendChild(para);
      }


      list.appendChild(listItem);
    }
  }
}   
var fileTypes = [
  'image/jpeg',
  'image/pjpeg',
  'image/png'
]


function validFileType(file) {
  for(var i = 0; i < fileTypes.length; i++) {
    if(file.type === fileTypes[i]) {
      return true;
    }
  }


  return false;
}
function returnFileSize(number) {
  if(number < 1024) {
    return number + 'bytes';
  } else if(number > 1024 && number < 1048576) {
    return (number/1024).toFixed(1) + 'KB';
  } else if(number > 1048576) {
    return (number/1048576).toFixed(1) + 'MB';
  }
}


input.style.opacity = 0;  隐藏input元素，因为文件输入在浏览器中的设计是丑陋的，很难用样式改变，而且各个浏览器的表现很不一致。在这里可以通过点击<label>来激活输入元素，因此做好隐藏输入元素，将label写成按钮的样式，所以用户将会知道点它可以上传文件。


注意：opacity被用来隐藏input,代替visibility:hidden或display: none。因为为残疾人设计的技术（辅助技术）理解后两种样式，意味着文件输入不能交互。（because assistive technology interprets the latter two styles to mean the file input isn't interactive.）


input.addEventListener('change', updateImageDisplay);  监听input元素，当value更改时（当文件被选中时），调用自定义函数updateImageDisplay()。


来看updateImageDisplay()函数，使用while循环来清空预览<div>的以前内容。
获取包含所有选定文件信息的FileList对象，并将其存储在一个名为curfile的变量中。
检查ifcurFiles.length是否等于0，检查是否没有选择任何文件。如果是，请在预览<div>中打印一条消息，指出没有选择任何文件。
如果选择文件，我们循环遍历每个文件，将其打印到预览<div>中。注意事项：
我们使用自定义的validFileType（）函数来检查文件是否是正确的类型（例如accept属性中指定的图像类型）。
如果是，我们：
将其名称和文件大小打印到之前的<div>中的列表项目中（从curFiles [i] .name和curFiles [i] .size获取）。自定义的returnFileSize（）函数返回一个格式为格式的格式，大小为字节/ KB / MB（默认情况下，浏览器以绝对字节的形式报告大小）。
通过调用window.URL.createObjectURL（curFiles [i]）生成图像的缩略图预览，并减少CSS中的图像大小，然后将该图像插入列表项。
如果文件类型无效，我们会在列表项目中显示一条消息，告诉用户他们需要选择不同的文件类型。
自定义的validFileType()函数将File对象作为参数，然后循环遍历允许的文件列表，检查是否匹配文件的type属性。如果找到匹配项，则该函数返回true,如果没有匹配，则返回false。


returnFileSize（）函数使用一个数字（从当前文件的size属性中取出的字节数），并将其转换成格式良好的大小（以字节/ KB / MB为单位）。