Ajax异步上传文件实例代码分享

非常不多说,直接给大家上干货,写的不好还请见谅。

具体代码如下所示:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Index</title> <script> $(function() { $(':button').click(function () { var formData = new FormData(); var file = $("input[type='file']")[0].files[0]; formData.append("files", file); $.ajax({ url: '/Upload/Upload', //server script to process data type: 'POST', //Ajax事件 //beforeSend: beforeSendHandler, //success: completeHandler, //error: errorHandler, // Form数据 data: formData, //Options to tell JQuery not to process data or worry about content-type cache: false, contentType: false, processData: false }); }); }); </script> </head> <body> <form enctype="multipart/form-data"> <input name="file" type="file" multiple="multiple" /> <input type="button" value="Upload" /> <input type="text" name="userName" value="ice" /> </form> </body> </html>

以上代码是小编给大家分享的Ajax异步上传文件实例代码,希望对大家有所帮助,如果大家有疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-26 07:24:46

Ajax异步上传文件实例代码分享的相关文章

Ajax异步上传文件实例代码分享_AJAX相关

非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Ind

Ajax表单异步上传文件实例代码(包括文件域)_AJAX相关

1.起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 2.尝试 先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSu

Ajax表单异步上传文件实例代码(包括文件域)

1.起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 2.尝试 先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSu

JQuery插件ajaxfileupload.js异步上传文件实例

这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下     在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用:  代码如下: <scr

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例_php实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

JQuery插件ajaxfileupload.js异步上传文件实例_jquery

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码 代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script

PHP+Ajax异步带进度条上传文件实例_php实例

最近项目中要做一个带进度条的上传文件的功能,学习了Ajax,使用起来比较方便,将几个方法实现就行. 前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min

php+ajax实现异步上传文件或图片功能

本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容如下 //html代码 <form enctype="multipart/form-data" id="upForm"> <input type="file" name="file" ><br><br> <input type="button" value="提交&q

简述Java异步上传文件的三种方式_java

本文为大家分享了三种Java异步上传文件方式,供大家参考,具体内容如下 用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使当前页面跳转,感觉就像是异步操