基于 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. 在oracle中使用基表建立月表的存储过程

    某些系统需要按月分表来保存数据.下面的存储过程演示了如何使用基表来建立每个月的月表. 处理思路是:     1:首先,为基表建立好表和对应的索引.     2:将基表保存到一个存储过程需要的表中.   ...

  2. 自定义可拖动的Toast

    package com.loaderman.toastdemo; import android.content.Context; import android.graphics.PixelFormat ...

  3. Spring-AOP简单实现方式

    AOP的专业术语: 1.创建Maven管理项目: pom.xml导入依赖 <properties> <!-- springframe 版本控制 --> <spring.v ...

  4. stegsolve---图片隐写查看器

    今天做CTF隐写术的题偶然发现一隐写图片查看的神器------stegsolve,分享给大家 stegsolve下载地址:http://www.caesum.com/handbook/Stegsolv ...

  5. C#在DataGridView中自定义键盘功能——光标在单元格内具体位置

    //捕捉按键 protected override bool ProcessCmdKey(ref Message msg,Keys keyData) { if (keyData == Keys.Rig ...

  6. IDEA工具上传项目报:Push rejected: Push to origin/master was rejected

    原文:https://blog.csdn.net/a137151062/article/details/78820806 解决方案如下: 1.切换到自己项目所在的目录,右键选择GIT BASH Her ...

  7. vue-cli 3.x 构建项目,webpack没有了?

    vue-cli 3.x 已经没有了webpack.config.js文件.取而代之的是创建一个vue.config.js文件.官网是这样介绍的 vue.config.js const path = r ...

  8. .NET 实现复制粘贴功能

    老是把自己当作珍珠,就时时有怕被埋没的痛苦.把自己当作泥土吧,让众人把你踩成一条道路. -----<泥土>鲁藜 .NET如何实现复制粘贴功能,具体代码如下: aspx文件: <div ...

  9. 【Linux开发】彻底释放Linux线程的资源

    Linux系统中程序的线程资源是有限的,表现为对于一个程序其能同时运行的线程数是有限的.而默认的条件下,一个线程结束后,其对应的资源不会被释放,于是,如果在一个程序中,反复建立线程,而线程又默认的退出 ...

  10. [Python3 练习] 011 利用异常解题

    目录 函数式编程 Functional Programming 1. 简介 2. 函数 3. 匿名函数 3.1 lambda 表达式也称"匿名函数" 3.2 lambda 表达式的 ...