使用 jQuery 的 AJAX 异步上传文件 - 文章教程

使用 jQuery 的 AJAX 异步上传文件

发布于 2017-11-30 字数 3835 浏览 2249 评论 0

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

你不得不知关于HTML5中File API的秘密

由于是 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 的最大优点就是我们可以异步上传一个二进制文件。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论