表单

同步上传：必须写上 enctype="multipart/form-data" input不能省name属性的值

<form enctype="multipart/form-data" action="/upload" method="post">
    <input type="file" name="file" id="file">
    <input type="submit" name="" value="提交">
</form>

异步上传：不用在form上加属性，input的name也可以不要，因为可以用id获取dom元素

注意：

formData('filename', 'file')

• 第一个参数：是key，和表单中的name的值是一个意思
• 第二个参数：文件的数据对象

e.preventDefault

• 取消默认事件行为，和return false功能一样
• e.preventDefault内部其实最后也是调用的 return false
• 不用return false的原因：
  • 如果在return false前代码执行出现错误，就会导致return false不执行，不利于调试

<form>
    <input type="file" name="" id="file">
    <input type="submit" name="" value="提交">
</form>

// 原生
upload() {
    document.querySelector('form').onsubmit = function(e) {
      	e.preventDefault(); // 取消默认事件
        var formData = new FormData();
       	
        formData.append('myFile', document.getElementById('file').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/upload');
        xhr.send(formData);
        xhr.onreadyStatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert("成功");
            }
        }
    }
}

// jquery
upload() {
    $('form').on('submit', function(e) {
      var formData = new FormData();
      formData.append('myFile', document.getElementById('file').files[0]);
      e.preventDefault();
      // 下方必须加 contentType: false, processData: false,
      // 否则会报错：Illegal invocation
      // 这是因为：jq默认头是 content-type: www-url... 键值对
      // 当data传递的是个formData时，jq会默认将该对象转为键值对字符串，这是不合理的
      $.ajax({
      	url: '/upload',
        type: 'post',
        data: formData,
        contentType: false, // 不需要头
        processData: false, // 不需要转数据
        success: function() {
        	console.log('ok');
        }
      })
    });
}