html5 新东西：FormData 可以提交二进制数据。
页面test.html
<!DOCTYPE>
<html>
<head>
<title> formdata file jquery ajax upload</title>
</head>
<body>
<form class="form-horizontal" role="form" id="myForm"
action="http://v0.api.upyun.com/xxx" method="post"
enctype="multipart/form-data">
<input type="hidden" name="policy"
value="">
<input type="hidden" name="signature"
value="">
<div class="form-group">
<label class="col-sm-2 control-label">说明:</label>
<div class="col-sm-10">
<p class="form-control-static ">ajax 文件上传 。</p>
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-2 control-label"><s>*</s>图片选择:</label>
<div class="col-sm-7">
<input type="file" name="file" id="file_upload" value=""
class="form-control" placeholder="图片地址">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-7">
<a id="btnAjax" class="btn btn-info col-md-5 col-lg-offset-1"
onclick="uploadByForm();">Ajax上传</a>
</div>
</div>
</form>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
/**
* ajax 上传。
*/
function uploadByForm() {
var formData = new FormData($("#myForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
//var formData = new FormData();//构造空对象，下面用append 方法赋值。
// formData.append("policy", "");
// formData.append("signature", "");
// formData.append("file", $("#file_upload")[0].files[0]);
var url = "http://v0.api.upyun.com/xxx";
$.ajax({
url : url,
type : 'POST',
data : formData,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData : false,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType : false,
success : function(responseStr) {
alert("成功：" + JSON.stringify(responseStr));
// var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")");
},
error : function(responseStr) {
alert("失败:" + JSON.stringify(responseStr));//将 json对象 转成 json字符串。
}
});
}
</script>
</body>
</html>
引用
分享到：
相关推荐
// 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/...
struts2+jquery+ajax实现了文件的异步上传，的MyEclipse编写的简单项目
但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过jQuery的Ajax上传呢？ 本文将介绍通过jQuery使用FormData对象上传文件。 使用<form>表单初始化FormData对象方式上传文件 HTML代码 &...
使用FormData方式提交上传附件与相关数据 同时实现jQuery-form.js附件上传功能 同时实现标准的html input file提交 同时实现easyuiFileBox与标准的ajax附件上传功能 有数据库，下载直接能运行
与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。 jQuery 2.0+的版本支持FormData 方法一：使用<form>表单初始化FormData对象方式上传文件 •前端（JQuery）： <form ...
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写，这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。...
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json。分享给大家供大家参考，具体如下： 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...
jQuery+ajax实现文件上传功能(显示文件上传进度)，供大家参考，具体内容如下 具体实现步骤 1、定义UI结构,引入bootstrap的CSS文件和jQuery文件 2、给上传按钮绑定点击事件 3、验证是否选择了文件 4、向FormData...
FormData 对象可以使用append 方法进行 key – value的数据添加，与以前我们常用的json不同的就是可以异步上传二进制文件。 1、FormDate对象的创建 var formData = new FormData(); 2、向 FormDate 对象添加数据 ...
众所周知文件上传是Web开发中的重要话题，... 下面这篇文章小编就来和大家分享jQuery利用FormData实现文件上传的方法，文中介绍的方法简单易懂，相信对大家的理解和学习很有帮助，有需要的朋友们下面来一起学习学习吧。
jQuery Ajax方式上传文件用到两个对象 第一个对象：FormData 第二个对象：XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能...
本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码，供大家参考，具体内容如下 JS代码： //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: "/Admin/...
jQuery Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，接下来通过本文给大家介绍jquery ajax 上传文件处理方式。 FormData对象 XMLHttpRequest Level 2添加了...
Saving ASP.Net Form Data with jQuery AJAX and JSON Parser
通过Django的Form方式上传文件，简单，但无法局部刷新实现ajax效果； 通过js或jQuery方式，需要使用FormData对象，仍有些浏览器不兼容； 通过Form+iframe方式上传文件，兼容性最好。 里面含有全部源代码。
处理表单的数据可以用serialize()方法进行序列化，而如果提交的数据包括文件流的话，就需要使用 FormData对象： 不带文件的表单数据使用：var data = $(form).serialize(); 带文件的表单数据使用： var data = new...
jQueryBifröst 使用隐藏的iframe技术发出异步请求，甚至可以从根本不支持FormData ， File API或XMLHttpRequest的浏览器发送文件和数据。 （缩小并压缩成1.3kb）设置加载所需的文件jquery.js和jquery.bifrost.js 。...