Ajax文件上传

提交表单或者Ajax post一些数据，都比较常见，未来的服务都是api形式的，相应的，未来的页面都会是异步的。本文记录文件上传，或者是图片上传相关的一些内容。

基本实现上传

上传一个图片，一个最基本的表单如下：

<input id="image" type="file" accept="image/png,image/gif" name="image">

如果支持多张选择，如下：

<input id="image" type="file" multiple="multiple" name="images">

如果是选择文件之后，就开始自动上传，那么需要监听'change'事件，代码大体如下：

$('input:file').on('change', function(e) {
    var formData = new FormData();
    formData.append('image', this.files[0]);
    var xhr = new XMLHttpRequest();
    xhr.onload = function(req) {
        var response = JSON.parse(req.target.response)
        console.log(response);
    };
    xhr.open("POST", "/api/image/uplaod/", true);

    // 发送表单数据
    xhr.send(formData);
    // 清空
    $(this).val('');
});

上面的代码只演示了一张图片的上传，如果改成多张上传不会太难。有几点说明：

1. XMLHttpRequest是Ajax的本质
2. $(this).val('');以保证用户再次上传同一张图片时还能触发change事件
3. onload回调是XMLHttpRequest 2.0版本提供的，如果是1.0版本，等价写法为

   xhr.onreadystatechange = function() {
       if (xhr.readyState === 4)
       {
           /* do some thing*/
       }
   };

关于混合表单提交

一个表单里同时有文件上传和其实数据提交，这个时候直接使用$(form).on('submit', function() {...})来提交一个FormData，数据部分用$.serializeArray()，文件部分跟上面示例一样。

有个第三方库帮忙解决这些繁琐的事情，jquery.form/jquery.form.min.js，它基于Jquery，为<form>扩展了ajaxSubmit()方法，能够很好地处理各种提交。不过，过滤掉不需要提交的数据有些费劲。

关于文件上传的按钮

文件上传的按钮很丑，其样式还无法定制，所以通常的做法是做一个漂亮的按钮，然后在它旁边隐藏一个文件上传控制。当按钮点击之后，触发文件上传控件的点击，如此达到定制上传按钮的目的。比如这么写：

<input type="file" accept="image/jpeg,image/png,image/gif" style="display: none;">
<div class="uploader">
  <i class="fa fa-plus"></i>
  <p>上传图片</p>
</div>

有趣的是，不能直接在html中通过onclick触，必须得使用$.on('click', function() {...})进行绑定回调，如下：

$('.uploader').on('click', function(e) {
    e.preventDefault();
    $(this).siblings('input:file').click();
});