文件的上传（表单上传和ajax文件异步上传）

         项目中用户上传总是少不了的，下面就主要的列举一下表单上传和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="jquery-2.1.4.js"></script>

    <script>

        $(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();

                    }

                });

            });

        });

    </script>

</head>

<body>

        选择文件:<input type="file" id="file1" /><br />

        <input type="button" id="upload" value="上传" />

        <img src="wait.gif" style="display:none" id="imgWait" />

</body>

复制代码

一般处理程序服务器端：

复制代码

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);

        }

文件的上传（1）（表单上传和ajax文件异步上传）的更多相关文章

  1. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  2. 项目回顾1-图片上传-form表单还是base64-前端图片压缩

    第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上 ...

  3. MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  4. struts2 文件的上传下载 表单的重复提交 自定义拦截器

    文件上传中表单的准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设 ...

  5. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

  6. 文件的上传（表单上传和ajax文件异步上传）

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

  7. servlet文件上传2——复合表单提交（数据获取和文件上传）

    上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...

  8. 普通文件的上传（表单上传和ajax文件异步上传）

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  9. 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  10. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

随机推荐

  1. 服务器iis跟server-u 冲突

    server-u  一定要配置域才可以监听21端口,不然一直ping 都是无效的.

  2. zrender-粒子动画

    效果: let x = shuN.style.x + rectValue/4,//粒子开始的地方 y = zuY+140 + 5, h = 14*0.8, w = rectValue/2; this. ...

  3. 【Vue】input textarea自动滚动到输入处

    由于我这里要把接口返回的日志不断地新增到textarea里,想实现自动滚动日志的效果. 1.首先定一个textarea类型的input组件 <el-input id="textarea ...

  4. 分治NTT：我 卷 我 自 己

    感觉这种东西每次重推一遍怪麻烦的,就写在这里了. 说白了就是根据分治区间左端点是否为\(0\)分类讨论一下,一般是如果不是\(0\)就要乘\(2\),不过还是需要具体问题具体分析一下才好(就比如下面的 ...

  5. [NLP] The Annotated Transformer 代码修正

    1. RuntimeError: "exp" not implemented for 'torch.LongTensor' class PositionalEncoding(nn. ...

  6. windows基础提权

    Window基础提权 提到system权限 甚至让他变成你的肉鸡 我们了解一下windows下面有那些用户 Guests是用户最低的权限 而且一般是被禁用的 User权限也很低 连关机都不行 还有wi ...

  7. 重温IOC，DI的理解

    IOC和DI其实它们是同一个概念的不同角度描述 IOC强调的是程序控制对象(创建销毁),变换成了容器来控制对象(创建销毁) DI:即IoC容器帮对象找相应的依赖对象通过反射注入     从Spring ...

  8. Maven项目解决Remove '@override' annotation终极方案

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  9. 第十三周Java课程学习总结

    学习总结: 记事本界面: 监听适配器. 可以通过Window Adapter来实现监听. void windowActivated(WindowEvent e) 激活窗口时调用. void windo ...

  10. PHP 页面中实现数据的增删改查

    main页面(主页面) <table width="100%" border="1" cellpadding="0" cellspac ...