通过传统的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);
使用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);
}
});
}
相关推荐
总之，通过Ajax方式进行文件上传相较于传统的form表单提交具有诸多优点，其中最大的亮点是可以异步上传文件，不会导致页面刷新，使用户体验更加流畅。而FormData接口的引入，更是简化了通过JavaScript进行文件上传的...
文件上传可以通过多种方式实现，但在本实例中，我们主要关注如何使用FormData结合Ajax技术来完成文件上传的过程。 ### 关键知识点一：FormData对象 FormData对象是JavaScript中一个内置的构造函数，它提供了一种...
// 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/...
2. jQuery监听文件选择事件：当用户选择文件后，jQuery会捕获这一事件，并触发Ajax请求。 3. Ajax发送文件：使用jQuery的Ajax方法，将文件数据和相关参数（如文件名、类型等）打包成请求，发送到服务器。 4. Struts2...
在现代Web开发中，"上传文件AJAX"是一项至关重要的技术，它允许用户在不刷新整个页面的情况下，通过异步方式上传文件。这种方式极大地提升了用户体验，因为它使得网页交互更加流畅和快速。AJAX（Asynchronous ...
Express为：4.13.1 multyparty...前端采用通过ajax方式上传文件，使用FormData进行ajax请求 ，nodejs端采用multiparty模块 相关查看文档： 通过Ajax方式上传文件，使用FormData进行Ajax请求 node-multiparty github F
用户通过`<input type="file">`选择文件后，将文件添加到`FormData`对象，然后通过XMLHttpRequest发送请求。 ### 2. 创建HTML表单 首先，我们需要一个包含文件选择控件的HTML表单： ```html ()">上传 ``` #...
通过创建FormData实例，我们可以添加文件，并通过Ajax请求发送。 2. **XMLHttpRequest或Fetch API**：使用XMLHttpRequest的send方法发送FormData对象，或者使用Fetch API的fetch函数，配合body参数传递FormData，...
在现代Web应用中，用户对交互性和实时性的需求越来越高，传统的表单提交方式往往不能满足这些需求，尤其是在处理大文件上传时。这时，Ajax技术就显得尤为重要，它能实现页面无刷新的数据交换，使得文件上传过程更加...
这里使用FormData对象的原因是它可以支持文件上传，而传统的form表单在处理文件上传时需要设置enctype为multipart/form-data，而这在Ajax请求中是不支持的。 在Ajax请求中，设置了一些关键的选项，比如type为POST...
但随着技术的发展，人们找到了利用AJAX进行文件上传的方法，例如通过使用插件或库，如本案例中的"ajaxfileupload"。 "ajaxfileupload"是一个JavaScript库，专门用于解决AJAX文件上传的问题。它使得开发者能够轻松地...
通过创建FormData对象，我们可以添加File对象，然后使用AJAX的send方法将这些数据发送到服务器。 4. **前端代码实现** - 使用`<input type="file" multiple>`元素让用户选择多个文件。 - 当用户选择文件后，通过...
2. 接着，创建一个HTML页面，包含多文件输入字段和Ajax请求： ```html <!DOCTYPE html> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="upload-btn">Upload $...
标签“ajax”和“异步文件上传”表明，这个主题是关于使用Ajax技术实现实时文件上传，而无需等待整个页面刷新。在实际项目中，你可能还需要考虑错误处理、文件大小限制、多文件上传、以及安全性等问题。 至于提供的...
- **FormData对象**：在前端，我们需要使用`FormData`对象来封装待上传的文件，然后通过`XMLHttpRequest`或`fetch` API来发送异步请求。 - **事件监听**：`Ajax`可以监听文件上传的进度，如开始、加载中、完成等...
【Ajax跨域文件上传详解】 Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下，通过...通过这个“ajax跨域上传文件CSDN”压缩包，你可以找到一个实际的示例来进一步研究和实践这些概念。
设置文件输入控件的change事件，当用户选择文件后触发AJAX请求。 2. JavaScript处理：在change事件中，创建FormData对象，添加文件数据，创建XMLHttpRequest对象，设置请求头，然后调用send()方法发送数据。 3. ...
4. **进度反馈**：前端通过Ajax请求获取上传进度，并更新用户界面。这可以通过在PHP中计算已接收块的比例，并返回给前端进行显示。 5. **文件合并**：所有块上传完成后，PHP脚本将这些小块合并成原始文件。这可以...
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术是一种不可或缺的工具，它使得网页可以在不刷新整个页面的情况下...通过这种方式，你可以创建一个高效、无刷新的文件上传功能，提高用户对网站的满意度。