form 表单提交浏览器的enctype(编码方式)
1. method 为 get 时
enctype :x-www-form-urlencoded(默认), 把form数据append到对应的url后面;
2. method 为 post 时
Browser 把form 数据封装到http body 后面;
a. 没有type=file控件:
enctype :application/x-www-form-urlencoded (默认) 就可以了;
b. 有type=file控件:
enctype:multipart/form-data(显式指定),Browsert会把表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分隔符(boundary)
实际业务场景:在提交表单时,表单中存在name控件,同时包含上传的file; 现需要将后台返回信息回显过来;
- 用自带的form报表提交,在from 标签上加 enctype="multipart/form-data";
可以正常提交 name属性和 file文件,但返回数据前端无法接收到;
- 用 ajax提交表单数据,用ajax,post等方式处理;
要么可以提交单一的file 文件,要么通过 $('form').serialize() 序列化实现提交 name属性的控件;
- 解决方案:
借用 jquery.form.js插件(其中另外用了 jquery.validate.js用于数据校验,此插件独立于jquery.form.js),实现代码如下:
var options = {
rules: {
...,
},
messages: {
...,
}
}; function showResponse(responseText, statusText) {
if (statusText == 'success') {
alert('success');
}else{
alert('failed');
}
} //确定
function saveSubmit($from) {
validator = $from.validate(options);
$from.submit(function() {
$(this).ajaxSubmit({
type : "post",
url : $from.attr('action'),
beforeSubmit : function(formData, jqForm, options) {
return $from.valid();
},
success : showResponse
});
return false; // 此处必须返回false,阻止常规的form提交
});
}
form 表单提交浏览器的enctype(编码方式)的更多相关文章
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- form 表单提交的另一种方式 js
<html> <head> <script type="text/javascript"> function formSubmit() { fm ...
- form表单提交数据编码方式和tomcat接受数据解码方式的思考
http://blog.sina.com.cn/s/blog_95c8f1ac010198j2.html *********************************************** ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- Form 表单提交的几种方式
简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的 这种方式最近到一个form提供action路径后台接受就可以< ...
- 小程序 <web-view></web-view> 中使用 form 表单提交
在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...
- js_ajax模拟form表单提交_多文件上传_支持单个删除
需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...
随机推荐
- L1-023 输出GPLT
给定一个长度不超过10000的.仅由英文字母构成的字符串.请将字符重新调整顺序,按GPLTGPLT....这样的顺序输出,并忽略其它字符.当然,四种字符(不区分大小写)的个数不一定是一样多的,若某种字 ...
- matlab学习笔记 函数bsxfun repmat
一.举例 a=rand(3,1);b=rand(1,3); c=bsxfun(@plus,a,b); d=a*b; c和d的运算类似,只不过c是外加,d是外乘. 作用:速度快>for循环> ...
- iOS7,iOS8和iOS9的区别
iOS7,iOS8和iOS9的区别:iOS7.0 1.iOS 7是iOS面世以来在用户界面上做出改变最大的一个操作系统.iOS 7抛弃了以往的拟物化设计,而采用了扁平化设计. 苹果在重新思考 iOS ...
- BZOJ3514: Codechef MARCH14 GERALD07加强版【LCT】【主席树】【思维】
Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. Input 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密. 接下来 ...
- AFN不支持 "text/html" 的数据的问题:unacceptable content-type: text/html
使用AFN若遇到这个错误信息 Request failed: unacceptable content-type: text/html bug原因: 这不是AFNetworking的问题 这是做Ser ...
- elasticsearch问题解决之分片副本UNASSIGNED
在上一篇文章中,我记录了在windows下同一台机器上搭建es集群的步骤,第二天在向集群中创建索引的时候,出现了分片副本未分配的情况(UNASSIGNED). 虽然并不影响数据的插入和查询,但是有问题 ...
- cin和cout详解
无论输入数字还是字符串,一个回车键是把输入的这个东西送到变量中,可以一次性送到 一个(或者多个)空格键是分隔这些值的 cout <<N; for(int i=0;i<5;i++) { ...
- 初学者必读之AJAX简单实例2
1.a前台页面的主体 b.添加script函数: 这个函数功能1:把文本框的数据传入到后台程序 2.再接收后台程序处理之后的数据,将其插入到页面 2.后台程序功能 软件测试
- PostgREST docker-compose 试用
PostgREST 是一款很不错的直接将pg 数据库暴露为restapi ,使用了基于行级别安全访问控制, 比较全的restapi 查询以及集成了swagger openapi docker-comp ...
- XSL自定义函数
利用微软的XSL的继承特性,用户可以自定义XSL函数.基本原理是用户写的脚本代码写在msxsl中,并设置这部分msxsl继承到用户自定义空间中,那么用户就可以通过用户自定义空间使用msxsl中的脚本代 ...