表单上传功能实现 ajax文件异步上传
(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理!
资源下载:
一、jQuery官方下载地址:https://jquery.com/download/
一.表单上传:
html客户端部分:
<form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <input type="submit" value="上传" /> </form>
一般处理程序服务器端:
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; HttpPostedFile file1 = context.Request.Files["file1"]; helper.uploadFile(file1, "~/upload/");//这里就是对相应方法进行调用 context.Response.Write("ok");//提示执行成功 }
上传代码的封装:
/// <summary> /// 上传图片 /// </summary> /// <param name="file">通过form表达提交的文件</param> /// <param name="virpath">文件要保存的虚拟路径</param> 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); } } /// <summary> /// 上传文件 /// </summary> /// <param name="file">通过form表达提交的文件</param> /// <param name="virpath">文件要保存的虚拟路径</param> 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客户端部分:
<head> <script src="/UploadFiles/2021-04-02/jquery-2.1.4.js">一般处理程序服务器端:
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); }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:Ajax实现动态加载组合框的实例代码