`

jQuery Ajax 上传文件处理方式介绍(推荐)

 
阅读更多
  看了半天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上传文件asp.net版

    在jQuery实现Ajax上传文件时,通常会结合HTML表单和FormData对象。表单用来收集用户选择的文件,FormData则用于封装这些文件以便通过Ajax发送。以下是一个简单的HTML表单示例: ```html 上传 ``` 接下来,...

    jQuery Ajax上传文件

    在现代Web开发中,jQuery库提供了许多...总结,jQuery Ajax上传文件涉及到前端的jQuery事件监听和Ajax调用,以及后端的文件接收和处理。这种技术提高了用户体验,让用户能够在不离开当前页面的情况下完成文件上传操作。

    jquery ajax上传文件

    这通常是一个自定义的JavaScript文件,用于封装jQuery的AJAX上传功能。在这个文件中,可能包含了创建XMLHttpRequest对象、处理文件选择、构建FormData对象以及发送请求等一系列操作。 ### jQuery AJAX 基础 在...

    struts2+jquery+ajax文件异步上传

    总的来说,"struts2+jquery+ajax文件异步上传"是一个结合了后端处理和前端交互的文件上传解决方案,提供了良好的用户体验和灵活性。通过MyEclipse这样的集成开发环境,开发者可以方便地构建、调试和部署这样的项目。

    jQuery+php实现ajax文件即时上传

    当用户通过Ajax上传文件时,PHP脚本会将文件保存到这个目录中。 在实际应用中,为了提高用户体验,还会使用Progress事件来显示上传进度条,以及使用FormData对象来处理文件数据。同时,考虑到安全性,应确保文件...

    jquery+ajax文件上传

    // 进行AJAX上传操作 }); ``` 3. **AJAX请求**:利用jQuery的`$.ajax()`或`$.ajaxSetup()`方法构建AJAX请求。这里,我们使用`FormData`对象来封装文件和其他表单数据。 ```javascript var formData = new ...

    ajax+jquery+ashx实现上传文件

    在Web开发中,异步传输(Ajax)技术允许我们...通过这种组合使用Ajax、jQuery和ASHX的方式,我们可以创建一个高效且用户体验良好的文件上传系统,无需离开当前页面即可完成文件上传,从而提高了Web应用的交互性和效率。

    SpringMvc整合jQuery,ajax单文件/多文件上传

    本教程将详细讲解如何将Spring MVC与jQuery和AJAX结合,实现单个文件和多个文件的上传功能。 首先,我们需要确保项目已经正确地集成了Spring MVC框架。这包括配置Spring的DispatcherServlet、ContextLoaderListener...

    Jquery Ajax 前后台数据传输

    本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输,以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用** jQuery提供了`$.ajax()`方法,它是所有其他AJAX功能的基础。例如,我们可以使用...

    ASP.NET jquery ajax无刷新上传文件demo

    综上所述,这个示例提供了从客户端到服务器端的完整文件上传流程,利用jQuery的AJAX功能和uploadify插件实现了无刷新上传,同时在ASP.NET的HTTP Handler中处理文件,确保了上传过程的流畅性和用户体验。对于学习ASP...

    jquery+ajax上传解析文件

    以下是一个简单的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上传文件` 的实现结合了 ASP.NET 的服务器端处理能力、jQuery 的前端交互便利性和 AJAX 的无刷新特性,为用户提供了一个流畅且高效的文件上传体验。通过理解这些技术的协同工作,开发者...

    jquery upload ajax方式

    本篇文章将深入探讨如何使用jQuery实现AJAX方式的文件上传,以及相关的核心知识点。 ### 1. jQuery与Ajax jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。Ajax...

    在Web API中使用jQuery AJAX实现文件上传的例子

    本教程将详细介绍如何在ASP.NET Web API中结合jQuery的AJAX方法实现文件上传。 首先,我们需要在客户端创建一个HTML表单,用于用户选择要上传的文件。HTML表单通常包含一个`<input type="file">`元素,用户可以通过...

    PHP + jQuery实现ajax文件即时上传 预览 配套资源

    在这个文件中,我们使用的是jQuery的1.4.1版本,尽管现在有更新的版本,但1.4.1仍然能够支持基本的Ajax上传功能。jQuery的核心函数如`$(document).ready()`用于在页面加载完成后执行代码,`$.ajax()`用于发起Ajax...

    ajax+jquery文件批量上传.doc

    // Ajax上传文件 function TajaxFileUpload() { if (Tnum ) { $("#uploadImgState" + Tnum).html("<img src='../images/loading.gif'/>"); // 显示加载动画 $.ajax({ type: "POST", url: ...

    jquery ajax上传 带进度条

    "jquery ajax上传 带进度条"这个主题就是关于如何在jQuery AJAX上传文件时展示进度反馈。 首先,jQuery本身并不直接支持文件上传的进度显示,但可以通过一些插件来实现,如Uploadify。Uploadify是一款强大的jQuery...

    jquery+ajax实现文件上传的js

    本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务。而AJAX(Asynchronous ...

Global site tag (gtag.js) - Google Analytics