通过Ajax方式上传文件(图片),使用FormData进行Ajax请求

  • HTML:  

<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>

  • JS:

function doUpload() {

var formData = new FormData($( "#uploadForm" )[0]);

$.ajax({

url: ‘xxx‘ ,                  --------------这里是请求的接口

type: ‘POST‘,

data: formData,

async: false,

cache: false,

contentType: false,

processData: false,

success: function (returndata) {

alert(returndata);

},

error: function (returndata) {

alert(returndata);

}

});

}

时间: 2024-12-10 22:39:23

通过Ajax方式上传文件(图片),使用FormData进行Ajax请求的相关文章

通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: 1 2 3 4 5 6 7 8 9 <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">       <h1 >测试通过Rest接口上传文件 </h1&g

H5 通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: Html代码   <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定

Ajax方式上传文件

用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传文件</title>

上传文件,使用FormData进行Ajax请求,jsoncallback

通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定文件名: <

Ajax方式上传文件报错&quot;Uncaught TypeError: Illegal invocation&quot;

今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeError: Illegal invocation,百度了一下,找到了解决方法. 解决方法:在ajax请求的参数中添加如下两个参数: $.ajax({ ..., processData: false, contentType: false, ... }); processData 类型:Boolean

android post方式上传文件(模拟表单格式数据提交)

表单提交内容为: POST /upload.php?zp_id=ab46ca6d703e3a1580c1c9b8b3a8fb39 HTTP/1.1Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/v

15. 利用ajax jquery 上传文件

通过jQuery Ajax使用FormData对象上传文件 字数664 阅读26857 评论18 喜欢18 FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用F

Android必知必会-使用okhttp的PUT方式上传文件

背景 公司的文件上传接口使用PUT协议,之前一直用的都是老项目中的上传类,现在项目中使用了okhttp网络库,就查了下资料,在这里分享一下. 代码实现 /** * @param mediaType MediaType * @param uploadUrl put请求地址 * @param localPath 本地文件路径 * @return 响应的结果 和 HTTP status code * @throws IOException */ public String put(MediaType

一个ajax实现表单上传文件的神器 formdata

通过传统的form表单提交的方式上传文件: $.ajax({ url : "http://localhost:8080/STS/rest/user", type : "POST", data : $( '#postForm').serialize(), success : function(data) { $( '#serverResponse').html(data); }, error : function(data) { $( '#serverResponse