文件的上传（表单上传和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. qt5--模态对话框和非模态对话框

    视频教程:https://www.bilibili.com/video/av51766541/?p=20 #include "win.h" #include <QMenuBa ...

  2. 【leetcode】745. Prefix and Suffix Search

    题目如下: Given many words, words[i] has weight i. Design a class WordFilter that supports one function, ...

  3. sublime开发工具各类配置和插件的安装

    1.css颜色提示 惯例两步: ctrl+shift+p Install package 手动输入color Highlighter 注意,一定要手动输入,复制粘贴回车会没有反应,一般手动输入colo ...

  4. HGOI20190811 省常中互测4

    Problem A magic 给出一个字符串$S$,和数字$n$,要求构造长度为$n$只含有小写字母的字符串$T$, 使得在$T$中存在删除且仅删除一个子串使得$S=T$成立. 输出$T$的构造方案 ...

  5. CodeForces 1245D Shichikuji and Power Grid

    cf题面 解题思路 比赛过程中想了一个贪心--把所有城市按照自建代价排序,排在第一的城市肯定自建,之后依次判断排在后面的城市要自建还是要连接前面的.这么做WA13了(第一次忘开long longWA4 ...

  6. AtCoder4351 Median of Medians 二分, 树状数组

    题目大意 定义一个从小到大的数列的中位数为第 $ \frac{n}{2}+1 $ 项.求一个序列的所有连续子序列的中位数的中位数. $ (n \leqslant 100000)$ 问题分析 由于\(n ...

  7. Oracle 监听hang住

    1.数据库正常启动: [oracle@db ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Sat Aug 24 ...

  8. task.delay 和 thread.sleep

    1.Thread.Sleep 是同步延迟. Task.Delay异步延迟. 2.Thread.Sleep 会阻塞线程,Task.Delay不会. 3.Thread.Sleep不能取消,Task.Del ...

  9. [CSP-S模拟测试]:平方数（数学+哈希）

    题目传送门(内部题137) 输入格式 第一行,一个正整数$n$. 第二行$n$个正整数$a_1\sim a_n$. 输出格式 输出一个整数,为满足条件的二元组个数. 样例 样例输入: 51 2 3 4 ...

  10. DeepFaceLab参数详解之FPS与Image format

    DeepFaceLab参数详解之FPS与Image format , 本文讲解两个非常简单的参数,也是大家玩这个软件最先接触到的.参数虽然非常的简单,但是非常有用,适当调整可以为你节省大量硬盘空间,大 ...