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

每次在向服务器提交文件对象数据是，总是需要借助各种三方插件来实现表单异步提交功能，还要为不同的界面去定制不同的插件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('连接超时');

}

};

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...相关推荐

使用HTML5 FormData轻松完成Ajax表单提交
在我们的日常开发中,经常都会用到Ajax来提交表单.让我们来看一个典型的例子: <form id="myform" action="webservice.php&q ...
web 表单自定义字段_带有自定义服务器字段验证的AJAX表单提交
web 表单自定义字段 Overview 总览 This article presents a method for validating form data in a PHP script usin ...
mysql中jxgl什么意思_使用Management Studio按下表信息在JXGL数据库中创建名为CJ的成绩表。...
[单选题]Java源文件和编译后的文件扩展名分别为() [简答题]1.请大家做完实验后将数据填写到表格相应空格中,教师验收,当堂签字确认. 2.课下按照指导书上关于实验报告的书写部分完成数据处理.总结 ...
ajax同步和异步提交的区别
/**获取用户登录信息返回值:如果用户已登录返回登录信息,否则返回false */ function get_user_info() {var url = PUB_URL+"get_user ...
ajax表单提交excel,ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...
【转】4.2使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录-- 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是今天我想介绍的是一款jQuery的插件:Jquery.form. ...
ajax异步提交 java_jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
增大mysql修改表空间_扩充数据库表空间
ALTER TABLESPACE ADD DATAFILE , [REUSE] NEXT MAXSIZE <>中是你要填的内容,有|是选其一. 如:增加文件是d:\dbfs\mydatab ...
setvlet：控制台获取前端表单以及xml文件数据信息
一,创建maven项目,编写xml 首先我们从创建一个maven 项目可以使用webapp模板,然后配置web.xml文件可以直接复制以下代码 <web-appxmlns:xsi=" ...

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

html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...相关推荐

最新文章

热门文章