文件的上传（表单上传和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. 基于树莓派2代的DIY无线路由器

    最近手上多了一个树莓派2代,于是折腾就这么开始了. 因为总是得要个显示屏或者路由器或者插根网线才能玩,有点麻烦,所以有了此文. 设备清单: 树莓派2代 EDUP EP-N8508GS无线网卡(USB) ...

  2. buuctf@ciscn_2019_c_1

    from pwn import * context.log_level='debug' #io=remote('node3.buuoj.cn',29121) io=process('./ciscn_2 ...

  3. buuctf@warmup_csaw_2016

    from pwn import * io=remote('node3.buuoj.cn',27774) io.recvuntil('WOW:') addr=(io.recvuntil('\n')[:- ...

  4. Java中 DecimalFormat 用法详解

    我们经常要将数字进行格式化,比如取2位小数,这是最常见的.Java 提供DecimalFormat类,帮你用最快的速度将数字格式化为你需要的样子.下面是一个例子: import java.text.D ...

  5. Python天天学_02_基础二

    Python_day_02 金角大王:http://www.cnblogs.com/alex3714/articles/5717620.html ------Python是一个优雅的大姐姐 学习方式: ...

  6. Nowcoder 练习赛26 D xor序列 ( 线性基 )

    题目链接 题意 : 中文题.点链接 分析 : 对于给定的 X 和 Y 假设存在一个 Z 使得 X (xor) Z = Y 做一个变形 X (xor) Z (xor) Y = 0 X (xor) Y = ...

  7. 序列模式挖掘--SPADE算法

  8. [CSP-S模拟测试]:蛇（DP+构造+哈希）

    题目传送门(内部题140) 输入格式 前两行有两个长度相同的字符串,描述林先森花园上的字母. 第三行一个字符串$S$. 输出格式 输出一行一个整数,表示有多少种可能的蛇,对$10^9+7$取模. 样例 ...

  9. 分布式-信息方式-JMS信息结构

    JMS的消息结构JMS消息由以下几部分组成:消息头,属性和消息体消息头包含消息的识别信息和路由信息,消息头包含一些标准的属性如下:1: JMSDestination:由send方法设置2: JMSDe ...

  10. 泛型中的<Object>并不是像以前那样有继承关系的，也就是说List<Object>和List<String>是毫无关系的

    泛型中的<Object>并不是像以前那样有继承关系的,也就是说List<Object>和List<String>是毫无关系的