总结篇：表单上传

表单上传可以分为两种方式，一种是文本消息上传，另一种则是文件上传。

文本消息上传，例如登录时的用户名，密码传给服务器；文件上传，例如完善个人信息之类的上传个人照片。

其中，根据上传的方式，我们又可以分为两种方法，分别是form表单上传，ajax方式异步上传。

 

1、form表单上传

这种方式是最基本的也是最常见的上传方式。

其中文本与文件两种类型的最大区别便是上传文件的时候要设置enctype属性。即：

<form action="upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="text" name="text"/>
    <input type="submit"/>
</form>

enctype属性有两个，“application/x-www-form-urlencoded”，enctype属性值设为这个表示上传的内容为文本，

所以一般我们只是上传文本信息的时候不需要设定enctype属性，因为浏览器给的enctype默认值就是它。

而当我们上传文件的时候，则需要显性的设置enctype为“multipart/form-data”，表示以二进制形式把数据传到服务器。

 

2、xhr上传

所谓的ajax上传其实就是利用了XMLHttpRequest对象以及它的方法。

注意上传时要区分开get方法与post方法。

假设我们是使用get方法上传文本给服务器，那么写法如下：

var xhr=new XMLHttpRequest();
xhr.open("GET","upload?username=qiangzi&password=123");
xhr.send(null);

把需要传给服务器的数据构造在url中，利用?号传值把数据传给服务器。

当我们使用的是post方法时，此时的数据是通过send方法传送，同时还要注意设置Content-type属性。

var xhr=new XMLHttpRequest();
xhr.open("POST","upload");
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("user=qiangzi");

由于此处我们是上传文本，所以设置的Content-type和form表单一样设为application/x-www-form-urlencoded

那么，当我们要上传的是文件时，该怎么使用xhr对象处理？

这个时候，就要用到FormData对象。

<input type="file" id="file"/>
<input type="button" id="btn" value="上传"/>
<script>
    var file=document.getElementById("file");
    var btn=document.getElementById("btn");
    btn.onclick=function(){

        var formData=new FormData()
        formData.append("photo",file.files[0]);

        var xhr=new XMLHttpRequest();
        xhr.open("POST","upload")
        xhr.setRequestHeader("Content-type","multipart/form-data;charset=UTF-8");
        xhr.send(formData);

    }
</script>

由于上传的是文件，所以此处设了

xhr.setRequestHeader("Content-type","multipart/form-data;charset=UTF-8");

然后，我们创建了一个formData对象，并使用该对象的append方法把file.files[0]，即获取选中的文件，设置一个key-value，

其中files[0]这个是fileList对象的一个用法，获取file上传的文件。至此，我们就完成了xhr上传文件，也可理解为ajax的文件上传？

 

扩展：那么关于FormData这个对象，除了可以结合xhr上传文件，当然也可以上传普通的文本信息。

关于FormData的一种用法是

    var form=new FormData();
    form.append("username","qiangzi");
    form.append("password","123");
    xhr.send(form)

对于这个用法，稍微有点鸡肋，一般append方法都是结合以下使用：

另一种用法：假设你有一个form表单，同时form表单就是填写信息的地方，那么我们可以这样

<form action="upload" method="post" enctype="multipart/form-data" id="form">
    <input type="file" name="file"/>
    <input type="text" name="text"/>
    <input type="submit" value="提交"/>
</form>
<script>
    var formElement=document.getElementById("form");
    var form=new FormData(formElement);
    form.append("username","qiangzi");
    xhr.send(form);
</script>