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='file']").forEach(function (item, i) { //获取file对象 即相当于可以直接post的$_FILES数据 var domFile = $(item)[0].files[0]; //追加file 对象 formData.append('file', 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表单异步上传文件实例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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

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