通过jQuery Ajax使用FormData对象上传文件

转自:http://www.cnblogs.com/labnizejuly/p/5588444.html

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>
$.ajax({
    url: ‘/upload‘,
    type: ‘POST‘,
    cache: false,
    data: new FormData($(‘#uploadForm‘)[0]),
    processData: false,
    contentType: false
}).done(function(res) {}).fail(function(res) {}); 

这里要注意几点:

  • processData设置为false。因为data值是FormData对象,不需要对数据做处理。
  • <form>标签添加enctype="multipart/form-data"属性。
  • cache设置为false,上传文件不需要缓存。
  • contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"

时间: 2024-10-24 11:56:59

通过jQuery Ajax使用FormData对象上传文件的相关文章

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存的图片路径展示出图片,实现一个无刷新的异步图片上传的过程,当然这里我讲解的是单张图片的保存过程,对于多图片上传的话其实我们只需要在type='file'文本框中加上一个multiple可多选,然后获取input中的文件数组遍历向后台提交感兴趣的话可以尝试,不过下一篇博客将会讲解如何使用L

Ajax使用formdata异步上传文件,报错the request was rejected because no multipart boundary was found

基于jQuery的Ajaxs使用FormData上传文件要注意两个参数的设定 processData设为false 把processData设为false,让jquery不要对formData做处理,如果processData不设置为false,jquery会把formData转换为字符串. contentType设为false http发送multipart/form-data请求报文示例 POST /api/feed/ HTTP/1.1 Accept-Encoding: gzip Conte

JQUERY AJAX无刷新异步上传文件

AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery Form Plugin 官网地址:http://malsup.com/jquery/form/#tab7 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用 http://www.cnblogs.com/wuhuacong/p/3343967.html

利用formdata对象上传文件时,需要添加的参数

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

FormData 对象上传二进制文件

使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同,也就是二进制文件. 不是用<form>

PHP+jQuery+Ajax实现多图片上传介绍

PHP+jQuery+Ajax实现多图片上传介绍: 本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用. 下面就来就来介绍一下这一款功能强大的插件的使用,需要的朋友可以做一下参考. 在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上,效果图如下: 一.HTML代码: 在页面上放置一个form表单,使用pos

使用Ajax.BeginForm 中需要 上传文件 但 Request.files获取不到

使用Mvc里的插件jquery.unobtrusive-ajax.min.js 之前一直困在这里,一开始以为添加属性enctype="multipart/form-data"就可以 网上看到都是用另外一个插件jquery.form.js 于是,从某篇文章的附件中下载了jquery.form.js,弄了许久,还不行,顿时泪崩了, 最后在官网下载最新的jquery.form.js就解决了  ==|| 使用Ajax.BeginForm 中需要 上传文件 但 Request.files获取不到

[转]如何使用multipart/form-data格式上传文件

form表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码.默认情况,这个编码格式是"application/x-www-form-urlencoded",不能用于文件上传:只有使用了multipart/form-data,才能完整的传递文件数据. 有时,在网络编程过程中需要向服务器上传文件.Multipart/form-data是上传文件的一种方式. Multipart/form-data其实就是浏览器用表单上传文件的

如何使用multipart/form-data格式上传文件(POST请求时,数据是放在请求体内,而不是请求头内,在html协议中,用 “\r\n” 换行,而不是 “\n”)

在网络编程过程中需要向服务器上传文件.Multipart/form-data是上传文件的一种方式. Multipart/form-data其实就是浏览器用表单上传文件的方式.最常见的情境是:在写邮件时,向邮件后添加附件,附件通常使用表单添加,也就是用multipart/form-data格式上传到服务器. 表单形式上传附件 具体的步骤是怎样的呢? 首先,客户端和服务器建立连接(TCP协议). 第二,客户端可以向服务器端发送数据.因为上传文件实质上也是向服务器端发送请求. 第三,客户端按照符合“m