基于 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. 修改Android EditText光标颜色和底线颜色

    1.修改光标颜色 EditText有一个属性:android:textCursorDrawable,这个属性是用来控制光标颜色的android:textCursorDrawable="@nu ...

  2. IPV6基础

    Pv6与IPv4的区别 Pv6报文与IPv4报文差别就两个地方: 一个是数据链路层(以太网协议)中协议类型,IPv4是0x0800,IPv6是0x86DD 另一个是IPv6 Header是40字节,I ...

  3. matplotlib展现混淆矩阵

    1.展现混淆矩阵 import matplotlib.pyplot as plt import itertools def plot_confusion_matrix(cm, classes, tit ...

  4. java.sql.SQLException: Listener refused the connection with the following error: ORA-12505, TNS:list

    package DisplayAuthors; import  java.sql.*; public class DisplayAuthors  { private static final  Str ...

  5. visual studio 2019 中初始化 vue.js 项目

    vs项目模板,webpack模板的创建方式在vs里创建后,npm install的过程会卡很久,暂时原因不明,感觉应该是文件太多,需要写入太多零碎文件. 试了几种初始化方法,还是用最新cli创建最好, ...

  6. Maven打包时出现无法下载org.apache.maven.plugins插件

    解决方式: 方式1:使用 mvn clean package -U 打包即可(注意:出于性能原因,Maven缓存插件无法下载的信息.根据您的设置,您可能需要通过将标志添加-U到命令行来清除此缓存,以使 ...

  7. Ubuntu为mysql的root用户密码问题

    1.root用户免密码登录mysql Ubuntu装完mysql时,root用户可以免密登录,如果设置的root用户密码忘记了,想要使用root用户免密登录,修改在配置文件的[mysqld]节点下添加 ...

  8. MUT值设置、top等命令无法执行、ssh无法登陆、vim命令卡住

    [root@host---- ~]# ifconfig eth0: flags=<UP,BROADCAST,RUNNING,MULTICAST> mtu inet 10.1.1.204 n ...

  9. apache thrift 入门(一)

    1.简介 Apache Thrift软件框架,是用来开发可扩展的跨语言的软件服务.通过软件堆栈和代码生成引擎相结合的方式来构建服务,使C++, Java, Python, PHP, Ruby, Erl ...

  10. java:Echarts,POI

    1.Echarts: demo.js: function demo(selector){ var myEcharts=echarts.init(selector); var option = { ti ...