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 ...
随机推荐
- 在电脑用Chrome运行安卓apk程序[ARC Welder]
chrome好用,但要FQ. 为了某些特别有意思的功能,FQ也要实现它. 这个就是:在chrome中使用android APP 一:系统需求: chrome浏览器 梯子(就是FQ,因为我们要去goog ...
- mysql 到postgresql
1 import pandas as pd 2 import psycopg2 3 from io import StringIO 4 import pymysql 5 conf={"mys ...
- Spring学习笔记之Testing
测试嘛,一般也就两种,一种就是单元测试,另外一个就是集成测试.都是废话 一.单元测试 以前也就是搞个模拟,main函数一写搞定. 现在呢,有了个spring,也有了个推荐规范?这个是个什么东西?什么叫 ...
- koa 微信小程序 项目
这个微信号入门, 应该能自己模仿做一个微信公众号了 另外 微信小程序开发 和 微信公众号h5嵌入 还是有区别的 h5嵌入在体验上和 微信小程序 差距还是比较大, 因为小程序直接调用了微信的原生组件, ...
- pygame经典sprite精灵类
import cStringIO, base64 import pygame from pygame.locals import * class Ball(pygame.sprite.Sprite): ...
- magento -- 给Magento提速之缓存上的探索
依然在为Magento提速做努力,除了自带的缓存和编译,之前的所作的很多努力都是从减少JS,Css,图片等载入时间入手,而对页面载入耗时最早有时也是最大的一部分--获取页面数据没有做太多处理,以gap ...
- Android Studio中设置提示函数用法
Eclipse有一个很好的功能,就是当你代码调用某个android API时,鼠标移到对应的函数或者方法上,就会自动有一个悬浮窗提示该函数的说明(所包含的参数含义,该方法功能).迁移到Android ...
- MyEclipse快捷键及经验总结 绝对的有用 太给力了
Ctrl+Shift+L 显示所有快捷键 Ctrl+K 参照选中的词(Word)快速定位到下一个 Ctrl+Shift+K 参照选中的词(Word)快速定位到上一个 C ...
- L2-2 重排链表 (25 分)
给定一个单链表 L1→L2→⋯→Ln−1→Ln,请编写程序将链表重新排列为 Ln→L1→Ln−1→L2→⋯.例如:给定L为1→2→3→4→5→6,则输出 ...
- 《DSP using MATLAB》Problem 4.21
快到龙抬头,居然下雪了,天空飘起了雪花,温度下降了近20°. 代码: %% -------------------------------------------------------------- ...