使用ajax上传表单(带文件)
在使用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上传表单(带文件)的更多相关文章
- ajax上传表单的俩种方式
1.用h5对象上传表单(图片) var formData = new FormData(); formData.append("authenticity_token", '1212 ...
- 【Flask】 结合wtforms的文件上传表单
表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...
- 上传漏洞科普[1]-文件上传表单是Web安全主要威胁
为了让最终用户将文件上传到您的网站,就像是给危及您的服务器的恶意用户打开了另一扇门.即便如此,在今天的现代互联网的Web应用程序,它是一种 常见的要求,因为它有助于提高您的业务效率.在Facebook ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
- jquery运用FormData结合Ajax异步上传表单,超实用
首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...
- Feign进行文件上传+表单调用
Feigin默认是不支持文件上传和表单提交的,需要做一些配置才能支持. 1.feign依赖 图中红色为form支持必须的jar. 2.添加自定义Encoder类: import static java ...
- html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...
随机推荐
- Android: 网络随时需要在3G和Wifi切换,网络程序需要注意
平时,3G和WIFI 都开着的时候,Android默认使用Wifi,但现实环境中不可能到处都有wifi,所以手机会经常自动切换网络. 有的时候,手机一开始使用wifi上网,当进入待机后10-30分钟, ...
- 关于vue-devtools安装
两种方法. 第一种:使用https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbp ...
- Java + 腾讯邮箱 SSL加密问题 重要通知
原来的jdk8版本如果不替换jce就会在发邮件的过程中报错,而此次使用的jdk1.8.0_131,并没有出现问题,也就是说,如果你使用的版本是 就不用考虑发邮件因为加密算法而导致的错误了
- idea去掉无效引用
Mac版的idea,打开Preference->Editor->General,打勾红色框框. 然后使用快捷键 contrl + option + o 只能去掉当前文件没有引用的包,并不能 ...
- 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位
HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...
- RegExp 对象
什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的模式可以是一个单独的字符. 更复杂的模式包括了更 ...
- 牛客多校第三场 A- PACM Team 背包/记忆路径
https://www.nowcoder.com/acm/contest/141#question 一眼背包,用四维dp记录在A,B,C,D条件限制下可以获得的最大知识点,但是题目要求输出路径,在输入 ...
- java内存模型及内存与cpu之间的关系
主内存和cpu之间的关系,因为cpu是在是处理速度太快了.所以一般cpu都有一个cpu缓存,上图的意思是主内存--->cpu缓存--->cpu寄存器--->cpu执行处理,写的时候反 ...
- Kafka 0.10问题点滴
15.如何消费内部topic: __consumer_offsets 主要是要让它来格式化:GroupMetadataManager.OffsetsMessageFormatter 最后用看了它的源码 ...
- POJ - 2187 Beauty Contest(最远点对)
http://poj.org/problem?id=2187 题意 给n个坐标,求最远点对的距离平方值. 分析 模板题,旋转卡壳求求两点间距离平方的最大值. #include<iostream& ...