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

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分。

下面的表格列出了所有的 jQuery 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+。之前都是用原生js的XMLHttpRequest写的请求

XMLHttpRequest方式

xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);

其实jquery的ajax也可以支持到的,关键是设置:processData 和 contentType 。

ajax方式

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");
}
});

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
ajax上传文件
jquery ajax 上传文件、jquery ajax上传图片、jquery ajax 上传、jquery ajax 上传头像、jquery ajax 批量上传,以便于您获取更多的相关知识。

时间: 2024-11-02 07:36:32

jQuery Ajax 上传文件处理方式介绍(推荐)_jquery的相关文章

jQuery获取上传文件的名称的正则表达式_jquery

方法一: $('input[type="file"]').on('change', function() { var reg = /[^\\\/]*[\\\/]+/g; //匹配文件的名称和后缀的正则表达式 var name = $(this).val().replace(reg, ''); var postfix = /\.[^\.]+/.exec(name);//获取文件的后缀 var text =name.substr(0,postfix['index']);//获取没有后缀的名

后台file为null-jquery ajax 上传文件 后台取不到file

问题描述 jquery ajax 上传文件 后台取不到file 正在做一个文件上传的程序,在上传之前需要验证文件的大小,不能超过10M,我采用的是jquery ajax的方式提交到后台Action,由后台Action判断文件大小. 首先看jsp页面: 上传的文件不得大于10M ....省略部分.... javascript代码: function checkFileSize() { var uploadfile = jq("#uploadfile"); var returnval =

使用ajaxfileupload.js实现ajax上传文件php版_jquery

 无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单.而利用JavaScript来配合,即可实现Ajax方式的文件上传.虽然jQuery本身没有提供这样的简化函数,但有不少插件可以实现.其中,Phpletter.com提供的ajaxfileupload.js是一个轻量的插件,而且编写方式与jQuery提供的全局方法$.post()非常相似,简单易用. 不过,该插件实在太简化了,除了可提供需上传文件的路径外,也就不能传递额外的值到后台服务端.所以,我修改了一下该脚本,增加个

jQuery异步上传文件插件ajaxFileUpload详细介绍

这篇文章主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数.错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下     一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileEl

Ajax上传文件进度条Codular

现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实现.大多数情况,人们使用jQuery来实现,但是随着浏览器的进步,人们比不需要这么做.这里我们将介绍如何在不离开页面的情况下将文件上传到服务器,我们将使用与我们之前的文章中使用的相同的后端PHP代码. 该脚本将上传文件至服务器,同时显示上传进度,并最终返回上传文件的链接地址.在某些情况下,你可能想要返回上传文件的id或者其他的应用信息. Note: 该代码不支持较老的ie浏览器,通过Can I use我们只支持ie1

php-PHP+ajax上传文件滚动条怎么做?

问题描述 PHP+ajax上传文件滚动条怎么做? 想做个上传文件袋滚动条的功能,用PHP+ajax来实现,例如点击 上传按钮 上传后返回上传成功路径,有滚动条显示.谁有代码分享下,谢谢 解决方案 http://www.helloweba.com/view-blog-189.html 解决方案二: swfupload,uploadify都可以(flash实现).. ajax是不能上传文件件的,要结合html5的formdata对象才行 jquery.form.js好像也有进度条(在支持formda

jQuery异步上传文件插件ajaxFileUpload详细介绍_jquery

一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url   上传处理程序地址. 2,fileElementId   需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,sc

jQuery fileload上传文件

<!-- 这个你可以不引入,上传功能也是正常的,不过样式就很坑了. --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 这个你也可以不引入,如果你够个性的话. --> <link rel="stylesheet" href="css/jquery.fileu

详解jquery uploadify 上传文件_javascript技巧

网上找了一天,大家都说Uploadify唯一的缺点就是不支持中文按钮,杯具之前,我看了下Uploadify的API,才发现了几个参数没被大家提及的,这正是解决此问题的关键.(以后坚决养成没事就看API的习惯)    Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行.    另一个参数,网上很少提到,是 buttonImg( 按钮图片),这时你完全可以