基于 jQuery

HTML:

<form id="form" enctype="multipart/form-data">
<input type="text" name="name" />
<input type="text" name="desc" />
<input type="file" name="image" id="doc0" /> <button type="button" id="submit" > 提交 </button>
</form>

JS:

// 提交表单
$('#submit').click(function () { // 创建FormData对象
var data = new FormData($('#form')[0]); // 为FormData对象添加数据
$.each($('#doc0')[0].files, function(i, file) {
data.append('image', file);
}); $.ajax({
url:'yoururl',
type:'POST',
data:data,
cache: false,
contentType: false, /* 不可缺 */
processData: false, /* 不可缺 */
success:function(result){
// 这里是你的成功逻辑
}
});
});

jQuery ajax 提交表单图片的更多相关文章

  1. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  2. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  3. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  4. jquery Ajax提交表单数据

    //表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#your ...

  5. jquery ajax 提交表单(file && input)

    用到的插件 jquery.js jquery.form.js[http://malsup.github.io/jquery.form.js] 提交页面 <form enctype="m ...

  6. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  7. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  8. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  9. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

随机推荐

  1. silverlight开发实例(Prism+MVVM+RIA)(二)--创建shell及用户登录

    在上篇基本说清了本项目的基本框架,下面开始说下项目的加载和shell.开始之前在建立EF时出现了一个问题,我在数据库中建立了视图,而在EF导入视图时出现因无法匹配主键导致无法导入视图的问题,检查发现是 ...

  2. 阿里巴巴 fastjson-1.2.12.jar json解析异常java.lang.ClassFormatError: Invalid method Code length 66865 in class file com/alibaba/fastjson/serializer/ASMSerializer_6_UserKdlb

    承接上篇:fastjson反序列化LocalDateTime失败的问题java.time.format.DateTimeParseException: Text '2019-05-24 13:52:1 ...

  3. SAS数据挖掘实战篇【三】

    SAS数据挖掘实战篇[三] 从数据挖掘概念到SAS EM模块和大概的流程介绍完之后,下面的规划是[SAS关联规则案例][SAS聚类][SAS预测]三个案例的具体操作步骤,[SAS的可视化技术]和[SA ...

  4. js多元运算

    for(var i=1;i<=100;i++){ var f = i%3 == 0, b = i%5 == 0; if(f){ if(b){ console.log("FizzBuzz ...

  5. 小程序入门 MQTT物联网协议 publish 和订阅subscribe onenet 阿里云 百度云 基于GPRS模块(SIM800C/SIM900A/SIM868等)和STM32主控芯片

    本文基本公开了如何移植MQTT物联网协议到STM32平台上,并结合GPRS模块(SIM800C/SIM900A/SIM868等)实现publish和订阅topic从onenet,阿里云,百度云等.如果 ...

  6. Struts 2访问Servlet API

    在servlet中可以通过servlet API来获取Session,在Struts中如何获取Session呢? 解析:将用户名放入session 两种方案 1. 与Servlet API解耦的访问方 ...

  7. java中start()、yield、setDeamon()

    本节主要说明以下三个问题 start()的启动顺序不代表线程的启动顺序 yeild的作用 守护线程 1.start()与线程启动顺序 package foreverly.cn.chapter1; pu ...

  8. 为什么 ConcurrentHashMap 的读操作不需要加锁?

    现在人工智能非常火爆,很多朋友都想学,但是一般的教程都是为博硕生准备的,太难看懂了.最近发现了一个非常适合小白入门的教程,不仅通俗易懂而且还很风趣幽默.所以忍不住分享一下给大家 ConcurrentH ...

  9. 说一下redis中5种数据类型的底层数据结构

      前言: 阅读 redis设计与实现 一书的记录.未完待续... redis我们都知道有5种数据类型,分别是string,list,hash,set,zset,那么你知道它们的底层数据结构实现吗? ...

  10. 【计算机网络】-介质访问控制子层-无线LAN

    [计算机网络]-介质访问控制子层-无线LAN 802.11体系结构和协议栈 802.11网络使用模式: 有架构模式(Infrastructure mode) 无线客户端连接接入点AP,叫做有架构模式 ...