ajax上传图片
来源:互联网 发布:网络监控显示不在线 编辑:程序博客网 时间:2024/06/15 14:39
通过传统的form表单提交的方式上传文件:
- <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
- <h1 >测试通过Rest接口上传文件 </h1>
- <p >指定文件名: <input type ="text" name="filename" /></p>
- <p >上传文件: <input type ="file" name="file" /></p>
- <p >关键字1: <input type ="text" name="keyword" /></p>
- <p >关键字2: <input type ="text" name="keyword" /></p>
- <p >关键字3: <input type ="text" name="keyword" /></p>
- <input type ="submit" value="上传"/>
- </form>
不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:
- $.ajax({
- url : "http://localhost:8080/STS/rest/user",
- type : "POST",
- data : $( '#postForm').serialize(),
- success : function(data) {
- $( '#serverResponse').html(data);
- },
- error : function(data) {
- $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
- }
- });
如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。
但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。
关于FormData及其用法
FormData是什么呢?我们来看看Mozilla上的介绍。
XMLHttpRequest Level 2添加了一个新的接口
FormData
.利用FormData对象
,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()
方法来异步的提交这个"表单".比起普通的ajax,使用FormData
的最大优点就是我们可以异步上传一个二进制文件. 所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
这里只展示一个通过from表单来初始化FormData的方式
<form enctype="multipart/form-data" method="post" name="fileinfo">
- var oData = new FormData(document.forms.namedItem("fileinfo" ));
- oData.append( "CustomField", "This is some extra data" );
- var oReq = new XMLHttpRequest();
- oReq.open( "POST", "stash.php" , true );
- oReq.onload = function(oEvent) {
- if (oReq.status == 200) {
- oOutput.innerHTML = "Uploaded!" ;
- } else {
- oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
- }
- };
- oReq.send(oData);
参见:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
使用FormData,进行Ajax请求并上传文件
这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
- <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]);
- $.ajax({
- url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
- type: 'POST',
- data: formData,
- async: false,
- cache: false,
- contentType: false,
- processData: false,
- success: function (returndata) {
- alert(returndata);
- },
- error: function (returndata) {
- alert(returndata);
- }
- });
- }
阅读全文
0 0
- Mvc Ajax 图片上传
- php+ajax上传图片
- ajax上传图片
- ajax 上传图片
- Java+ajax+图片上传
- Ajax+php上传图片
- ajax上传图片
- ajax 上传图片预览
- ajax上传图片
- AJAX上传图片功能
- ajax异步上传图片
- ajax异步上传图片
- ajax上传文件/图片
- PHP AJAX上传图片
- struts2 ajax图片上传
- ajax+fromData 上传图片
- php ajax图片上传
- javascript ajax上传图片
- LeetCode27——Remove Element(移除数组中指定的元素)
- Android自定义折线图和曲线图(曲线被渐变色填充)
- 自动化测试 appium Could not detect Mac OS X Version from sw_vers output: '10.12.3 ' 异常处理
- poj 1573 Robot Motion
- Highly Available (Mirrored) Queues
- ajax上传图片
- 微信小程序 美团顶部搜索框
- PM算法,不需要奇异值分解,快速获得噪声子空间
- Spring注入 @Autowired和setter方式区别原理
- Angular2平滑升级到Angular4的步骤详解
- Java 二维数组重组
- 一种定位内存泄露的方法(Linux)
- 中文语料库
- 三种最常见最短路算法 及其 应用范围