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是Web开发中的三个关键组件，它们共同构成了文件异步上传的基础框架。这个项目是在MyEclipse环境下实现的一个简单的文件上传功能，让我们深入了解一下这些技术及其在文件上传中的应用。 首先...
本主题围绕“基于jQuery的异步上传文件插件，使用了HTML5的FormData对象”展开，我们将深入探讨HTML5的FormData对象、jQuery在文件上传中的作用以及如何实现异步文件上传。 首先，HTML5的FormData对象是处理表单...
首先，我们需要创建一个HTML表单，用户可以通过这个表单选择文件进行上传。表单通常包含一个`<input>`元素，其`type`属性设置为`file`，以便用户能够选择本地文件： ```html 上传 ``` 接下来，我们引入jQuery...
- 可能对文件进行一些预处理，如缩略图生成、格式转换等。 - 生成一个包含上传状态和相关信息的响应，如文件名、大小、上传时间等，供前端展示。 7. **files**：这个目录可能是服务器上用来存储上传文件的地方。...
在jQuery实现Ajax上传文件时，通常会结合HTML表单和FormData对象。表单用来收集用户选择的文件，FormData则用于封装这些文件以便通过Ajax发送。以下是一个简单的HTML表单示例： ```html 上传 ``` 接下来，...
// 进行AJAX上传操作 }); ``` 3. **AJAX请求**：利用jQuery的`$.ajax()`或`$.ajaxSetup()`方法构建AJAX请求。这里，我们使用`FormData`对象来封装文件和其他表单数据。 ```javascript var formData = new ...
3. **Ajax通信**：使用jQuery的`.ajax()`或`.formData()`方法，将文件以multipart/form-data格式发送到服务器。这种方式可以确保大文件能够被正确分割并传输。 4. **后端处理**：在PHP端，我们需要接收并处理上传的...
这通常是一个自定义的JavaScript文件，用于封装jQuery的AJAX上传功能。在这个文件中，可能包含了创建XMLHttpRequest对象、处理文件选择、构建FormData对象以及发送请求等一系列操作。 ### jQuery AJAX 基础 在...
在现代Web开发中，文件上传是一项常见的功能，jQuery与Ajax结合使用FormData对象提供了一种高效、灵活的异步上传方式。FormData对象允许我们构建一个模拟的表单数据集，然后利用XMLHttpRequest对象发送这些数据，而...
但当需要上传图片到服务器时，通常服务器期望接收的是标准的文件格式，比如form表单中的文件输入类型（`<input type="file">`），这种格式的数据在AJAX中以formData形式发送。 实现这个过程通常需要三个步骤： 第...
使用FormData方式提交上传附件与相关数据 同时实现jQuery-form.js附件上传功能 同时实现标准的html input file提交 同时实现easyuiFileBox与标准的ajax附件上传功能 有数据库，下载直接能运行
以下是一个简单的jQuery+Ajax上传文件的示例代码： ```javascript $(document).ready(function() { $('#uploadForm').on('submit', function(event) { event.preventDefault(); var formData = new FormData...
在现代Web开发中，jQuery库提供了许多...总结，jQuery Ajax上传文件涉及到前端的jQuery事件监听和Ajax调用，以及后端的文件接收和处理。这种技术提高了用户体验，让用户能够在不离开当前页面的情况下完成文件上传操作。
本教程将详细讲解如何将Spring MVC与jQuery和AJAX结合，实现单个文件和多个文件的上传功能。 首先，我们需要确保项目已经正确地集成了Spring MVC框架。这包括配置Spring的DispatcherServlet、ContextLoaderListener...
2. **jQuery和AjaxUpload插件**：引入jQuery库和AjaxUpload插件的JavaScript文件，然后编写JavaScript代码来绑定事件和处理上传。 ```javascript $(document).ready(function() { var options = { url: 'upload....
与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。 jQuery 2.0+的版本支持FormData 方法一：使用<form>表单初始化FormData对象方式上传文件 •前端（JQuery）： <form ...
// 进行Ajax上传操作 } }); ``` 3. **创建FormData对象** 由于文件数据不能直接通过Ajax发送，我们需要创建一个FormData对象，将文件添加到其中： ```javascript var formData = new FormData(); formData...
综上所述，"C# jQuery AJAX 预览并无刷新上传图片"是一个结合了前端与后端技术的实用功能，涉及到HTML、CSS、JavaScript（jQuery、AJAX、FileReader API）、C#（ASP.NET）、以及文件I/O等多个方面的知识。...
在Web开发中，jQuery与AJAX的结合使用广泛地用于创建动态、无刷新的用户体验，尤其是在文件上传场景中。本文将深入探讨如何利用jQuery和AJAX实现文件上传，并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先，...