在使用form表单的时候上传文件+表单,会使得页面跳转,而在某些时候不希望跳转,只变化页面中的局部信息

通过查找资料,可以使用FormData进行ajax操作。

FormData介绍:XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

<form id= "uploadForm">
<p >指定文件名: <input type="text" name="filename" value= ""/></p >
<p >上传文件: <input type="file" name="file"/></ p>
<input type="button" value="上传" onclick="doUpload()" />
</form>
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]); // 要求使用的html对象
$.ajax({
url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
type: 'POST',
data: formData,
async: true,
// 下面三个参数要指定,如果不指定,会报一个JQuery的错误
      cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}

通过上面代码就可实现ajax提交带文件的form表单信息。

FormData还可以使用纯的js方式编写。

构造函数

new FormData (optional HTMLFormElement form)

参数

form
(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

append()

给当前FormData对象添加一个键/值对.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);
参数值
name
字段名称.
value
字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
filename(可选)
    指定文件的文件名,当value参数被指定为一个Blob对象或者一个File对象时,该文件名会被发送到服务器上,对于Blob对象来说,这个值默认为"blob".
后端接收方法中,参数
@RequestParam(value = "file", required = false)MultipartFile file

如果在上传文件时,返回值带

<pre style="word-wrap:break-word;white-space:prewrap;">xxx</pre>
在后台设置response可去点标签<pre>
response.setContentType("text/html; charset=utf-8");

使用ajax上传表单(带文件)的更多相关文章

  1. ajax上传表单的俩种方式

    1.用h5对象上传表单(图片) var formData = new FormData(); formData.append("authenticity_token", '1212 ...

  2. 【Flask】 结合wtforms的文件上传表单

    表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...

  3. 上传漏洞科普[1]-文件上传表单是Web安全主要威胁

    为了让最终用户将文件上传到您的网站,就像是给危及您的服务器的恶意用户打开了另一扇门.即便如此,在今天的现代互联网的Web应用程序,它是一种 常见的要求,因为它有助于提高您的业务效率.在Facebook ...

  4. bootstrap上传表单的时候上传的数据默认是0 一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  5. 原生js封装ajax:传json,str,excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  6. Ajax提交Form表单及文件上传

    刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...

  7. jquery运用FormData结合Ajax异步上传表单,超实用

    首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...

  8. Feign进行文件上传+表单调用

    Feigin默认是不支持文件上传和表单提交的,需要做一些配置才能支持. 1.feign依赖 图中红色为form支持必须的jar. 2.添加自定义Encoder类: import static java ...

  9. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

随机推荐

  1. Android: 网络随时需要在3G和Wifi切换,网络程序需要注意

    平时,3G和WIFI 都开着的时候,Android默认使用Wifi,但现实环境中不可能到处都有wifi,所以手机会经常自动切换网络. 有的时候,手机一开始使用wifi上网,当进入待机后10-30分钟, ...

  2. 关于vue-devtools安装

    两种方法. 第一种:使用https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbp ...

  3. Java + 腾讯邮箱 SSL加密问题 重要通知

    原来的jdk8版本如果不替换jce就会在发邮件的过程中报错,而此次使用的jdk1.8.0_131,并没有出现问题,也就是说,如果你使用的版本是 就不用考虑发邮件因为加密算法而导致的错误了

  4. idea去掉无效引用

    Mac版的idea,打开Preference->Editor->General,打勾红色框框. 然后使用快捷键 contrl + option + o 只能去掉当前文件没有引用的包,并不能 ...

  5. 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

    HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...

  6. RegExp 对象

    什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的模式可以是一个单独的字符. 更复杂的模式包括了更 ...

  7. 牛客多校第三场 A- PACM Team 背包/记忆路径

    https://www.nowcoder.com/acm/contest/141#question 一眼背包,用四维dp记录在A,B,C,D条件限制下可以获得的最大知识点,但是题目要求输出路径,在输入 ...

  8. java内存模型及内存与cpu之间的关系

    主内存和cpu之间的关系,因为cpu是在是处理速度太快了.所以一般cpu都有一个cpu缓存,上图的意思是主内存--->cpu缓存--->cpu寄存器--->cpu执行处理,写的时候反 ...

  9. Kafka 0.10问题点滴

    15.如何消费内部topic: __consumer_offsets 主要是要让它来格式化:GroupMetadataManager.OffsetsMessageFormatter 最后用看了它的源码 ...

  10. POJ - 2187 Beauty Contest(最远点对)

    http://poj.org/problem?id=2187 题意 给n个坐标,求最远点对的距离平方值. 分析 模板题,旋转卡壳求求两点间距离平方的最大值. #include<iostream& ...