资讯专栏INFORMATION COLUMN

使用HTML5的FormData对象, 通过 Ajax表单异步提交文件数据

用户83 / 1956人阅读

摘要:利用对象,我们可以通过用一些键值对来模拟一系列表单控件,我们还可以使用的方法来异步的提交表单。与普通的相比,使用的最大优点就是我们可以异步上传二进制文件。

每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐。XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。
话不多说直接上代码:

var formData = new FormData();
formData.append("template", that.template);
formData.append("declare", that.declareData.declare);
formData.append("self_intro", that.declareData.self_intro);
formData.append("plan_name", that.declareData.plan_name);
//$("#business_plan") 是一个file类型的input对象
formData.append("business_plan", $("#business_plan")[0].files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);

xhr.setRequestHeader("Accept", "application/json");
xhr.send(formData);
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function () {
    // 通信成功时,状态值为4
    var completed = 4;
    if (xhr.readyState === completed) {
        if (xhr.status === 200) {
            // 处理服务器发送过来的数据
            var result = JSON.parse(xhr.responseText);
            //这里你可以随意的处理这个result对象了
            //...
        } else {// 处理错误
            alert("连接超时");
        }
    }
};

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78999.html

相关文章

  • PHP_Ajax

    摘要:简介业务做一个在线投票,给歌手投票。提交到当前页面的中达到效果。用户名密码注册总结在不使用对象的情况下,依然可以用来实现对后台服务器的请求,同时不带来页面刷新或者跳转。 ajax 简介 业务:做一个在线投票,给歌手投票。要求:无刷新,并且不允许使用XMLHttpRequest对象.分析:在XHR对象,没有流行之前,已经有了无刷新这种效果的方法. 从http角度看,可以利用204 No...

    MiracleWong 评论0 收藏0
  • form表单那点事儿(下) 进阶篇

    摘要:在表单提交时,浏览器会自动进行一系列的校验工作,没有通过校验的表单是无法提交到服务器的。而方法提交表单,会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时,会触发事件。 上一篇主要温习了一下form表单的属性和表单元素,这一片主要讲解用JavaScript如何操作form。 表单操作 取值 用JavaScript操作表单,免不了会有取值赋值操作,比如有以下表单: ...

    jerryloveemily 评论0 收藏0

发表评论

0条评论

用户83

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<