文件的上传（表单上传和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. Bash快捷操作

    编辑命令 Ctrl + a :移到命令行首 Ctrl + e :移到命令行尾 Ctrl + f :按字符前移(右向) Ctrl + b :按字符后移(左向) Alt + f :按单词前移(右向) Al ...

  2. 项目的Servlet类找不到

    先右击项目,

  3. [The Annotated Transformer] Iterators

    Iterators 对torchtext的batch实现的修改算法原理 Batching matters a ton for speed. We want to have very evenly di ...

  4. crontab 常见 /dev/null 2>&1 详解

    大部分在 crontab 计划任务中都会年到未尾带 >/dev/null 2>&1,是什么意思呢? > 是重定向 /dev/null 代表空设备文件 1 表示stdout标准 ...

  5. Unity3D_(API)射线检测Raycast()

    Unity射线检测官方文档: 传送门 一.检测前方是否有游戏物体(射线无限长度) 二.检测前方是否有游戏物体(射线长度为1m) 三.检测前方游戏物体碰撞信息(射线无限长度): 四.指定检测碰撞Tag层 ...

  6. 安装python及其它

    https://www.liaoxuefeng.com/wiki/1016959663602400/1016959856222624

  7. 14.多线程设计模式 - Master-Worker模式

    多线程设计模式 - Master-Worker模式 并发设计模式属于设计优化的一部分,它对于一些常用的多线程结构的总结和抽象.与串行相比并行程序结构通常较为复杂,因此合理的使用并行模式在多线程并发中更 ...

  8. Zookeeper(五)持久化快照

    Zookeeper(五)持久化快照 用途 快照文件是指定时间间隔对zookeeper服务器上的节点数据的序列化后备份到磁盘中,快照文件不一定是最新的 如果zk集群挂了,可能会用到它来复原 基本术语 D ...

  9. 解决Cannot change version of project facet Dynamic Web Module to 3.1

    Open web.xml from project structure http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version= ...

  10. TCP定时器 之 TIME_WAIT定时器

    概述 在FIN_WAIT_2收到对端发来的FIN,并回复ACK之后,会进入TIME_WAIT状态,此时添加定时器,定时器超时会将tw控制块从ehash和bhash中删除,并且释放tw控制块: 启动定时 ...