看了半天Blob、File、FileReader,以及各种转化的知识,后来发现Ajax上传文件的方式很简单。
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式。
FormData对象
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function(){
console.log("正在进行,请稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失败");
}
},
error : function(responseStr) {
console.log("error");
}
});
转自:http://www.jb51.net/article/87654.htm
分享到:
相关推荐
在jQuery实现Ajax上传文件时,通常会结合HTML表单和FormData对象。表单用来收集用户选择的文件,FormData则用于封装这些文件以便通过Ajax发送。以下是一个简单的HTML表单示例: ```html 上传 ``` 接下来,...
在现代Web开发中,jQuery库提供了许多...总结,jQuery Ajax上传文件涉及到前端的jQuery事件监听和Ajax调用,以及后端的文件接收和处理。这种技术提高了用户体验,让用户能够在不离开当前页面的情况下完成文件上传操作。
这通常是一个自定义的JavaScript文件,用于封装jQuery的AJAX上传功能。在这个文件中,可能包含了创建XMLHttpRequest对象、处理文件选择、构建FormData对象以及发送请求等一系列操作。 ### jQuery AJAX 基础 在...
总的来说,"struts2+jquery+ajax文件异步上传"是一个结合了后端处理和前端交互的文件上传解决方案,提供了良好的用户体验和灵活性。通过MyEclipse这样的集成开发环境,开发者可以方便地构建、调试和部署这样的项目。
当用户通过Ajax上传文件时,PHP脚本会将文件保存到这个目录中。 在实际应用中,为了提高用户体验,还会使用Progress事件来显示上传进度条,以及使用FormData对象来处理文件数据。同时,考虑到安全性,应确保文件...
// 进行AJAX上传操作 }); ``` 3. **AJAX请求**:利用jQuery的`$.ajax()`或`$.ajaxSetup()`方法构建AJAX请求。这里,我们使用`FormData`对象来封装文件和其他表单数据。 ```javascript var formData = new ...
在Web开发中,异步传输(Ajax)技术允许我们...通过这种组合使用Ajax、jQuery和ASHX的方式,我们可以创建一个高效且用户体验良好的文件上传系统,无需离开当前页面即可完成文件上传,从而提高了Web应用的交互性和效率。
本教程将详细讲解如何将Spring MVC与jQuery和AJAX结合,实现单个文件和多个文件的上传功能。 首先,我们需要确保项目已经正确地集成了Spring MVC框架。这包括配置Spring的DispatcherServlet、ContextLoaderListener...
本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输,以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用** jQuery提供了`$.ajax()`方法,它是所有其他AJAX功能的基础。例如,我们可以使用...
综上所述,这个示例提供了从客户端到服务器端的完整文件上传流程,利用jQuery的AJAX功能和uploadify插件实现了无刷新上传,同时在ASP.NET的HTTP Handler中处理文件,确保了上传过程的流畅性和用户体验。对于学习ASP...
以下是一个简单的jQuery+Ajax上传文件的示例代码: ```javascript $(document).ready(function() { $('#uploadForm').on('submit', function(event) { event.preventDefault(); var formData = new FormData...
总之,`asp.net+jquery+ajax上传文件` 的实现结合了 ASP.NET 的服务器端处理能力、jQuery 的前端交互便利性和 AJAX 的无刷新特性,为用户提供了一个流畅且高效的文件上传体验。通过理解这些技术的协同工作,开发者...
本篇文章将深入探讨如何使用jQuery实现AJAX方式的文件上传,以及相关的核心知识点。 ### 1. jQuery与Ajax jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。Ajax...
本教程将详细介绍如何在ASP.NET Web API中结合jQuery的AJAX方法实现文件上传。 首先,我们需要在客户端创建一个HTML表单,用于用户选择要上传的文件。HTML表单通常包含一个`<input type="file">`元素,用户可以通过...
在这个文件中,我们使用的是jQuery的1.4.1版本,尽管现在有更新的版本,但1.4.1仍然能够支持基本的Ajax上传功能。jQuery的核心函数如`$(document).ready()`用于在页面加载完成后执行代码,`$.ajax()`用于发起Ajax...
// Ajax上传文件 function TajaxFileUpload() { if (Tnum ) { $("#uploadImgState" + Tnum).html("<img src='../images/loading.gif'/>"); // 显示加载动画 $.ajax({ type: "POST", url: ...
"jquery ajax上传 带进度条"这个主题就是关于如何在jQuery AJAX上传文件时展示进度反馈。 首先,jQuery本身并不直接支持文件上传的进度显示,但可以通过一些插件来实现,如Uploadify。Uploadify是一款强大的jQuery...
本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务。而AJAX(Asynchronous ...