文件/图片的上传 怎么做

在实际的开发当初，经常会遇到需要上传/文件图片的场景
比如，用户头像、审核资质证明等等。

常用的文件/图片上传的方式有下面几种

1、form表单 enctype=“form-data”

<form method="post" enctype="multipart/form-data" >
   <input type="file"  id="name" />
</form>

1.1 读取type=file的值

   <input id="file" type="file" name="file" />
   var files=document.getElementById("file").files[0]; // 没有设置多选时的取值

1.2 上传多个文件

<input type="file" multiple />

1.3 使用表单上传文件需要注意以下几点

1. method方式必须是post
2. form表单的entype必须是multipart/form-data。enctype，属性规定数据在发送到服务器之间该如何对表单数据进行编码。默认的表单的编码方式是application/x-www-form-urlencoded

1.4 form表单提交之后页面刷新的问题的解决

1. preventDefault和return false组织默认行为
2. 不使用submit类型的提交按钮，换成普通按钮
3. 添加一个空的iframe标签。 给form表单添加 target="default-iframe"``。给iframe添加属性name=“default-iframe”。同时将这个iframe```设置为不可见。

2、FormData

现在主流浏览器都支持FormData 对象，搭配ajax可以实现文件的上传。 IE的话，IE10以下的支持性就不太好了。

2.1 基本用法

   <input type="file" id="file" />

新建FormData，并append()

    var formData=new FormData();
    var files=document