200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > ajax文件异步实现表单上传

ajax文件异步实现表单上传

时间:2021-08-29 00:37:57

相关推荐

ajax文件异步实现表单上传

web前端|js教程

ajax,表单,实现

web前端-js教程项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理!

团购php源码,vscode vue颜色,ubuntu界面大小调整快捷键,查看tomcat后台,sqlite查询指定个数,淘宝联盟手机插件下载安装,前端搭建框架怎么做,许昌市爬虫公司,php定义类中this,潮州seo建站,众筹网站代码,网页游戏源码下载,星外主控模板制作lzw

资源下载:

音乐网源码出售,如何修改vscode语言,ubuntu下载安装,修改tomcat路径,sqlite发音,广州对网页设计师的要求,如何制作数据库网站,云服务器评测,jquery下拉菜单插件,好用的web前端框架,python多进程爬虫,达内php,超级seo外链,springboot入口,css实现浮出按钮标签的样式,业务网站带后台,做网页demo的工具,签到记录模板,后台ui模板,好看的404页面模板,物业管理系统绪论,星力棋牌程序lzw

A、jQuery官方下载地址:/download/

android app 源码,ubuntu系统默认分区,别人访问自己的tomcat,cnn网站爬虫,php多任务执行,seo优化和百度竞价的优势lzw

一.表单上传:

html客户端部分:

选择文件:

一般处理程序服务器端:

public void ProcessRequest(HttpContext context) {context.Response.ContentType = "text/plain";HttpPostedFile file1 = context.Request.Files["file1"];helper.uploadFile(file1, "~/upload/");//这里就是对相应方法进行调用context.Response.Write("ok");//提示执行成功 }

上传代码的封装:

////// 通过form表达提交的文件 /// 文件要保存的虚拟路径 public static void uploadImg(HttpPostedFile file,string virpath) { if (file.ContentLength > 1024 * 1024 * 4){ throw new Exception("文件不能大于4M");}string imgtype = Path.GetExtension(file.FileName);if(imgtype!=".jpg"&&imgtype!=".jpeg") //图片类型进行限制{ throw new Exception("请上传jpg或JPEG图片");}using (Image img = Bitmap.FromStream(file.InputStream)){ string savepath = HttpContext.Current.Server.MapPath(virpath+file.FileName); img.Save(savepath);} } ////// 通过form表达提交的文件 /// 文件要保存的虚拟路径 public static void uploadFile(HttpPostedFile file, string virpath) {if (file.ContentLength > 1024 * 1024 * 6){ throw new Exception("文件不能大于6M");}string imgtype = Path.GetExtension(file.FileName);//imgtype对上传的文件进行限制if (imgtype != ".zip" && imgtype != ".mp3"){ throw new Exception("只允许上传zip、rar....文件");}string dirFullPath= HttpContext.Current.Server.MapPath(virpath);if (!Directory.Exists(dirFullPath))//如果文件夹不存在,则先创建文件夹{ Directory.CreateDirectory(dirFullPath);}file.SaveAs(dirFullPath + file.FileName); }

二.Ajax文件异步上传:

注明:既然有了表单上传为什么又要ajax上传呢?因为表单上传过程中,整个页面就刷新了!ajax异步上传就可以达到只刷新局部位置,下面就简单看看ajax上传吧!

html客户端部分:

$(function () { $("#upload").click(function () { $("#imgWait").show(); var formData = new FormData(); formData.append("myfile", document.getElementById("file1").files[0]);$.ajax({url: "upload.ashx",type: "POST",data: formData,/***必须false才会自动加上正确的Content-Type*/contentType: false,/*** 必须false才会避开jQuery对 formdata 的默认处理* XMLHttpRequest会对 formdata 进行正确的处理*/processData: false,success: function (data) {if (data.status == "true") { alert("上传成功!");}if (data.status == "error") { alert(data.msg);}$("#imgWait").hide();},error: function () {alert("上传失败!");$("#imgWait").hide();} }); }); }); 选择文件:

一般处理程序服务器端:

public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; if (context.Request.Files.Count > 0) { HttpPostedFile file1 = context.Request.Files["myfile"]; helper.uploadFile(file1, "~/upload/"); //这里引用的是上面封装的方法 WriteJson(context.Response, "true", ""); } else { WriteJson(context.Response, "error", "请选择要上传的文件"); } }

json代码封装:

public static void WriteJson(HttpResponse response,string status1, string msg1, object data1 = null) {response.ContentType = "application/json";var obj = new { status = status1, msg = msg1, data = data1 };string json = new JavaScriptSerializer().Serialize(obj);response.Write(json); }

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。