首页 web前端 js教程 Ajax表单异步上传文件实例代码

Ajax表单异步上传文件实例代码

May 23, 2018 pm 02:58 PM
ajax 上传 文件

这篇文章主要介绍了Ajax表单异步上传文件实例代码(包括文件域),非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧

1.起因

做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功。

2.尝试

先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值。

$("#view").submit(
$("#view").ajaxSubmit({
type: "post",
url: "../api/Article/Add",
dataType: "json",
success: function (msg) {
console.log(msg);
},
error: function (msg) {
$("#resultBox").html("连接服务器失败");
console.log(msg);
}
})
);
登录后复制

比如上面的代码,不过怎么配置,只要上传了文件,success里面返回的msg一定是null(chromium浏览器下),但实际是有返回值的,而且没有文件时也是正常的。更可怕的是IE/EDGE下提示下载那个Json返回值。

翻了一下jquery.form.js的源代码,发现他是用Iframe实现的伪Ajax,不清真,Pass!

// are there files to upload?
var files = $('input:file', this).fieldValue();
var found = false;
for (var j=0; j < files.length; j++)
if (files[j]) 
found = true;
if (options.iframe || found) // options.iframe allows user to force iframe mode
fileUpload();
else
$.ajax(options);
登录后复制

这是有无文件时,分别调用2个不同的函数。

3.解决方案

经过多反调查,发现xhr(XMLHttpRequest)是个好东西。经过测试主流浏览器和手机浏览器都支持这个东西。下面介绍一下在jquery/zepto的ajax 获取原生XMLHttpRequest 对象上传表单(文件)的方法。

function AjaxForm(formID, options) {
var form = $(formID);
//将form对象直接作为参数 new FormData对象
var formData = new FormData(form[0]);
$("input[type=&#39;file&#39;]").forEach(function (item, i) {
//获取file对象 即相当于可以直接post的$_FILES数据
var domFile = $(item)[0].files[0];
//追加file 对象
formData.append(&#39;file&#39;, domFile);
})
if (!options)options = {};
options.url = options.url ? options.url : form.attr("action");
options.type = options.type ? options.type : form.attr("method");
options.data = formData;
options.processData = false; // tell jQuery not to process the data
options.contentType = false; // tell jQuery not to set contentType
options.xhr = options.xhr ? options.xhr : function () {
//这是关键 获取原生的xhr对象 做以前做的所有事情
var xhr = $.ajaxSettings.xhr();
xhr.upload.onload = function () {
console.log("onload");
}
xhr.upload.onprogress = function (ev) {
if (ev.lengthComputable) {
var percent = 100 * ev.loaded / ev.total;
console.log(percent, ev)
}
}
return xhr;
};
options.success = options.success ? options.success : function (data) {
alert(data)
};
$.ajax(options);
}
//调用
$("#sub").click(function (e) {
AjaxForm("#myForm");
});
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

下拉菜单的级联操作

Ajax实现省市区三级级联

基于Ajax表单提交及后台处理简单的应用

以上是Ajax表单异步上传文件实例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

可以删除Tmp格式文件吗? 可以删除Tmp格式文件吗? Feb 24, 2024 pm 04:33 PM

Tmp格式文件是一种临时文件格式,通常由计算机系统或程序在执行过程中生成。这些文件的目的是存储临时数据,以帮助程序正常运行或提高性能。一旦程序执行完成或计算机重启,这些tmp文件往往就没有了存在的必要性。所以,对于Tmp格式文件来说,它们本质上是可以删除的。而且,删除这些tmp文件能够释放硬盘空间,确保计算机的正常运行。但是,在删除Tmp格式文件之前,我们需

夸克网盘的文件怎么转移到百度网盘? 夸克网盘的文件怎么转移到百度网盘? Mar 14, 2024 pm 02:07 PM

  夸克网盘和百度网盘都是现在最常用的储存文件的网盘软件,如果想要将夸克网盘内的文件保存到百度网盘,要怎么操作呢?本期小编整理了夸克网盘电脑端的文件转移到百度网盘的教程步骤,一起来看看是怎么操作吧。  夸克网盘的文件怎么保存到百度网盘?要将夸克网盘的文件转移到百度网盘,首先需在夸克网盘下载所需文件,然后在百度网盘客户端中选择目标文件夹并打开。接着,将夸克网盘中下载的文件拖放到百度网盘客户端打开的文件夹中,或者使用上传功能将文件添加至百度网盘。确保上传完成后在百度网盘中查看文件是否成功转移。这样就

出现0x80004005错误代码怎么办 小编教你0x80004005错误代码解决方法 出现0x80004005错误代码怎么办 小编教你0x80004005错误代码解决方法 Mar 21, 2024 pm 09:17 PM

在电脑中删除或解压缩文件夹,时有时候会弹出提示对话框“错误0x80004005:未指定错误”,如果遇到这中情况应该怎么解决呢?提示错误代码0x80004005的原因其实有很多,但大部分因为病毒导致,我们可以重新注册dll来解决问题,下面,小编给大伙讲解0x80004005错误代码处理经验。有用户在使用电脑时出现错误代码0X80004005的提示,0x80004005错误主要是由于计算机没有正确注册某些动态链接库文件,或者计算机与Internet之间存在不允许的HTTPS连接防火墙所引起。那么如何

hiberfil.sys是什么文件?hiberfil.sys可以删除吗? hiberfil.sys是什么文件?hiberfil.sys可以删除吗? Mar 15, 2024 am 09:49 AM

  最近有很多网友问小编,hiberfil.sys是什么文件?hiberfil.sys占用了大量的C盘空间可以删除吗?小编可以告诉大家hiberfil.sys文件是可以删除的。下面就来看看详细的内容。hiberfil.sys是Windows系统中的一个隐藏文件,也是系统休眠文件。通常存储在C盘根目录下,其大小与系统安装内存大小相当。这个文件在计算机休眠时被使用,其中包含了当前系统的内存数据,以便在恢复时快速恢复到之前的状态。由于其大小与内存容量相等,因此它可能会占用较大的硬盘空间。  hiber

斜杠和反斜杠在文件路径中的不同使用 斜杠和反斜杠在文件路径中的不同使用 Feb 26, 2024 pm 04:36 PM

文件路径是操作系统中用于识别和定位文件或文件夹的字符串。在文件路径中,常见的有两种符号分隔路径,即正斜杠(/)和反斜杠()。这两个符号在不同的操作系统中有不同的使用方式和含义。正斜杠(/)是Unix和Linux系统中常用的路径分隔符。在这些系统中,文件路径是以根目录(/)为起始点,每个目录之间使用正斜杠进行分隔。例如,路径/home/user/Docume

酷狗上传自己的音乐的简单步骤 酷狗上传自己的音乐的简单步骤 Mar 25, 2024 pm 10:56 PM

1、打开酷狗音乐,点击个人头像。2、点击右上角设置的图标。3、点击【上传音乐作品】。4、点击【上传作品】。5、选择歌曲,然后点击【下一步】。6、最后点击【上传】即可。

Linux系统查看log日志命令详解! Linux系统查看log日志命令详解! Mar 06, 2024 pm 03:55 PM

在Linux系统中,可以使用以下命令来查看日志文件的内容:tail命令:tail命令用于显示日志文件的末尾内容。它是查看最新日志信息的常用命令。tail[选项][文件名]常用的选项包括:-n:指定要显示的行数,默认为10行。-f:实时监视文件内容,并在文件更新时自动显示新的内容。示例:tail-n20logfile.txt#显示logfile.txt文件的最后20行内容tail-flogfile.txt#实时监视logfile.txt文件的更新内容head命令:head命令用于显示日志文件的开头

如何使用Ajax从PHP方法中获取变量? 如何使用Ajax从PHP方法中获取变量? Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景,通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中,将介绍如何使用Ajax从PHP方法中获取变量,并提供具体的代码示例。首先,我们需要编写一个PHP文件来处理Ajax请求,并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码:

See all articles