asp.net使用H5新特性实现异步上传的示例
发布时间:2020-12-15 20:03:52 所属栏目:asp.Net 来源:网络整理
导读:###index.html !DOCTYPE htmlhtmlhead meta charset="utf-8" / script src="Script/jquery-1.10.2.min.js"/script script src="Script/index.js"/script title/title script type="text/javascript" $(function(){ $("#ajaxFileUpload").click(function () {
###index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="Script/jquery-1.10.2.min.js"></script> <script src="Script/index.js"></script> <title></title> <script type="text/javascript"> $(function(){ $("#ajaxFileUpload").click(function () { formDataUpload(); }); }); </script> </head> <body> <input type="file" id="FileToUpload" multiple="multiple" mame="FileToUpload" /> <input type="button" id="ajaxFileUpload" value="上传"/> <input type="text" size="10"/> </body> </html>
function formDataUpload() { //这里可以一次性选中多个文件 var fileUpload = document.getElementById("FileToUpload").files; if (fileUpload.length == 0) { alert("请选中文件再上传"); return; } //html5新特性 var formdata = new FormData(); //添加上传数据 for (var i = 0; i < fileUpload.length;i++){ formdata.append('files',fileUpload[i]); } //使用javascript的原生ajax var xmlHttp = new XMLHttpRequest(); xmlHttp.open("post",'Handler.ashx?method=formDataUpload'); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert("上传成功"); } } xmlHttp.send(formdata); } ###handler.ashx <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { formDataUpload(context); } public static void formDataUpload(HttpContext context) { //获取到客户端提交的文件 HttpFileCollection files = context.Request.Files; string msg = string.Empty; string error = string.Empty; int fileM = 0; if (files.Count > 0) { for (int i = 0; i < files.Count; i++) { ; String path = @"D:"+files[i].FileName; files[i].SaveAs(path); fileM += files[i].ContentLength; } msg = "上传成功,文件总大小:" + fileM; string res = "{error :'" + error + "',msg:'" + msg + "'}"; context.Response.Write(res); context.Response.End(); } } public bool IsReusable { get { return false; } } } 以上这篇asp.net使用H5新特性实现异步上传的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程小技巧。 您可能感兴趣的文章:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- asp.net-mvc – DatePicker编辑器模板
- asp.net-mvc-3 – MVC3 – 使用Entity框架设置Controller时
- 详解asp.net core封装layui组件示例分享
- asp.net web api定义的b/s调用方法一例
- asp.net-mvc – 如何在ASP.NET MVC 4中使用域组作为具有流畅
- asp.net – 它是老式的使用id的查询字符串吗?
- asp.net-mvc – web.config在哪里用于MVC应用程序?
- asp.net – 在aspx中缩短名称空间别名
- asp.net-mvc – 带图像托管的富文本编辑器
- asp.net – 为什么当我将模型传递给我的.Net MVC 4 Control
推荐文章
站长推荐
- asp.net – 403禁止错误
- asp.net-mvc-4 – ASP.NET MVC 4在哪里存储帐户信
- 如何在Vista上的IIS7下调试ASP.NET应用程序?
- asp.net – 无法将’System.Web.Profile.Default
- asp.net – 下载列表asp mvc
- ASP.Net MVC4 WebApi代理
- asp.net – Telerik RadGrid GridDataItem – 如
- asp.net-mvc-5 – Sharepoint 2013 MVC 5提供商托
- asp.net – 使用IIS(localhost)测试时重新学习的
- 动态数据 – ASP.NET动态数据向页面添加其他过滤
热点阅读