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(编码方式)的更多相关文章

  1. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  2. form 表单提交的另一种方式 js

    <html> <head> <script type="text/javascript"> function formSubmit() { fm ...

  3. form表单提交数据编码方式和tomcat接受数据解码方式的思考

    http://blog.sina.com.cn/s/blog_95c8f1ac010198j2.html *********************************************** ...

  4. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  5. form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  8. 小程序 <web-view></web-view> 中使用 form 表单提交

    在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...

  9. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

随机推荐

  1. NodeJS express不是外部或内部命令的解决办法

    今天在用express生成项目的时候,使用cmd命令窗口发现express不是“内部或外部命令......”.但是我已经使用了npm install -g express成功安装了express模块插 ...

  2. JAVA第5次作业

    将指定目录下的所有文件显示到列表框(JList)组件中,如下图所示: import java.awt.BorderLayout; import java.awt.Color; import java. ...

  3. Error:Cannot compile Groovy files: no Groovy library is defined for module 'xxxx' 错误处理

    出现 Error:Cannot compile Groovy files: no Groovy library is defined for module 'xxxx' 只要在 project str ...

  4. [转]TFS.VisualStudio.com TF30063: You are not authorized to access Collection

    If you are trying to connect to team foundation server online through visual studio and you get unau ...

  5. L224 词汇题

    Elaborate 精心的 preparations were being made for the Prime Minister’s official visit to the four forei ...

  6. Boosting 简单介绍

    前面介绍了Adaboost,知道了Adaboost是损失函数为指数函数的Boosting算法.那么Boosting还包括了以下几个: 损失函数名称 损失函数 算法 平方差(Squared error) ...

  7. C语言基础:函数(Function) 分类: iOS学习 c语言基础 2015-06-10 21:48 14人阅读 评论(0) 收藏

    函数:一段具有某些特定功能的代码段. 使用函数的严格规定: 1.函数声明 2.函数定义 3.函数调用 函数声明:告知系统编译器该系统的函数名,函数参数,参数类型,参数个数,参数顺序等等,以便函数调用时 ...

  8. UML-(团队作业)

    UML设计 1.团队信息: 队名:异次元 2.团队成员: 姓名 分配任务 王诚荣(队长) 汇总合并,系统活动图 马祎特 好感度系统类图,电子版图片绘制 陈斌 个人中心,闹钟界面用例图,状态图 洪康 后 ...

  9. SVN 将主干的代码合并到分支上

    来源:http://blog.csdn.net/u012701023/article/details/50978154 问题:开发有了项目主干,再次基础上起了一个分支,开发新的功能:因为业务需要,在上 ...

  10. matlab fgetl()

    % % file=dir('/home/wang/Desktop/trainset/others/'); % % :length(file) % % path= strcat('/home/wang/ ...