使用 jQuery 的 AJAX 异步上传文件

Question

现在基本上很多网页里面都在使用 jQuery，要实现文件的异步上传，大多数的解决方法都是使用 jQuery 插件，如果你只是上传一张图片，使用插件反而觉得多余了，其实 jQuery 的 ajax() 方法是可以实现文件上传的，不过我们平时基本使用 get() 和 post() 方法，ajax() 方法反而使用的很少，下面给大家分享使用 jQuery 的 AJAX 异步上传文件。

由于是 AJAX 异步上传，所以我们基本不需要 form 标签，只需要一个 file 的文本框。

<input type="hidden" name="store_avatar" class="store_avatar" value="" />
<input type="file" name="upload_file" class="upload_file" style="display:none; " />
<button type="button" class="btn btn-primary btn-xs profile_avatar_btn">上传图片</button>
<p>请上传你的店铺LOGO，支持 JPG、PNG 和 GIF 格式。</p>

这里为了界面好看，我们把 file 文本框隐藏，使用一个自定义的按钮来触发选择文件的操作，具体的操作就是当用户点击按钮的时候，使用 JS 的 trigger() 触发 file 的点击事件。

$('.profile_avatar_btn').click(function(){
    $(this).parents('td').find('.upload_file').trigger('click');
})

当 file 文本框的内容改变的时候，也就是用户选择了文件，我们绑定我们的自定义代码：

$('.upload_file').change(function(){
    //code
})

接下来就需要验证文件，因为用户选择的可能不是我们需要的文件类型

file_item = $(this).get(0).files[0];
if(file_item.size > 2 * 1024 * 1024){
    $('.profile_avatar_btn').attr('title', '文件太大').tooltip('show');
    return false;
}
if(!(file_item.type == "image/jpeg" || file_item.type == "image/gif" || file_item.type == "image/png")){
    $('.profile_avatar_btn').attr('title', '选择的文件不是图片').tooltip('show');
    return false;
}

如果上面的验证程序都通过了，那么我们开始上传文件

var formData = new FormData();
formData.append("upload_file", file_item);
$('.profile_avatar_btn').html('<i class="fa fa-refresh fa-spin"></i> 上传中');
this_input = $(this);
$.ajax({
    url: "/seller/shop-setting/",
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false,
    dataType:"json",
    beforeSend: function(){
        uploading = true;
    },
    success:function(data) {
        if (data.code == 1) {
            $('.store_avatar').val(data.msg);
            $('.profile_avatar img').attr('src', data.msg);
            $('.profile_avatar_btn').html('重新上传');
        }
        uploading = false;
    }
});

其中关键要素：

contentType:application/x-www-form-urlencoded

发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）

processData:true

默认情况下，通过 data 选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 application/x-www-form-urlencoded。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

FormData

XMLHttpRequest Level 2 添加了一个新的接口 FormData 利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交这个表单，比起普通的 ajax，使用 FormData 的最大优点就是我们可以异步上传一个二进制文件。