Form upload

基础概要

同步上传多文件简单实现

<form action='server/upload' method='post' enctype='multipart/form-data'>
  <input type='file[]' mutiple  />
  <input type='submit' value='upload'>
</form>

JS 提供的FormData构造函数及其方法

var newForm = new FormData();
newForm.append('Keyname','value');

newForm.get('Keyname')  // 'value'
newForm.has('Keyname') // true

newForm.delete('Keyname')
newForm.get('Keyname') // null

异步上传

<div>
  <input type='file[]' mutiple id='file' />
  <input type='submit' value='upload'>
</div>
<div class='progress-bar-wrapper' >
  <li class='progress-bar'></li>
  <span class="error-info"></span>
</div>
	
<script>
const fileNode = document.querySelector('#file');
const submitNode = document.querySelector('input[type="submit"]');
const progressBarWrapper = document.querySelector('.progress-bar-wrapper'),

fileNode.addEventListener('onchange',function(){
  // files属性可得到一组上传文件的信息，包括文件名称，文件大小（字节），文件类型等等
  const files = this.files;
  var fileName = '',
  		fileSize = 0,
      maxSize = 1048576,
      errorInfo = '',
      formData = null;
  
  for(let i=0; i<=files.length; i++){
    fileName = files[i].name;
    fileSize[i].size;
    if(!/\.(gif|jpg|jpeg|png)$/.test(fileName)){
      errorInfo = '类型错误'
    }
    if(fileSize>maxSize){
      errorInfo = '文件太大'
    }
    
    var progressBar = docuemtn.createElement('li');
    progressBar.className = 'progress-bar';
    progressBarWrapper.appendChild(progressBar);
    
    if(errorInfo !== ''){
      progressBarWrapper.innerHTML = `<span class="error-info">${errorInfo}</span>`
    }else{
      progressBar.innerHTML = '<div class="progress"></div>'
     	
      var formData = new FormData();
      formData.append('KeyName',files[i]);
      // Ajax
      var ajax = window.XMLHttpRequest? new window.XMLHttpRequest() : new ActionXObject('Microsoft.XMLHTTP');
      ajax.open('post','server/upload');
      // 利用闭包保存i
      (function(i){
          ajax.upload.onprogress = function(e){
          var e = e | window.event,
              percent = e.loaded / e.total*100+'%',
              thisProgressBar = getElementsByClassName('progress-bar')[i];

          thisProgressBar.getElementsByClassName('progress')[0].style.width = perceant;
      	} 
      })(i)
      ajax.send(formData);
    }
  }
})

</script>