文件的上传（表单上传和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. json从后台接收时转化格式

    后台传回的json格式为字符串格式 需要通过转化成json对象 方法一:$.get(设置type的属性为json) 方法二:设置response.setContentType("applic ...

  2. Python 标准库、第三方库

    Python 标准库.第三方库 Python数据工具箱涵盖从数据源到数据可视化的完整流程中涉及到的常用库.函数和外部工具.其中既有Python内置函数和标准库,又有第三方库和工具.这些库可用于文件读写 ...

  3. openvas 安装

    NMAP apt-get update & apt-get upgrade kali的更新命令 https://www.fujieace.com/kali-linux/update-sourc ...

  4. MyBaits理解？

    (1)MyBaits是一个基于Java的持久层框架,支持普通或定制化SQL查询.存储过程以及高级映射,使用XML或注解来配置和映射信息. (2)应用程序使用SQLSessionFactory实例,一个 ...

  5. 自动化部署脚本之windows上执行批处理文件

    windows  .bat  批处理 脚本路径如下: install-simo.bat文件内容: @ECHO OFF set scriptpath=%~dp0set logfile=%scriptpa ...

  6. 并发量，tps，qps

    QPS/TPS/并发量/系统吞吐量的概念 2017年08月13日 17:24:47 阅读数:10682 我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.这个 ...

  7. 基于dubbo的分布式系统（一）安装docker

    1.安装过程参考: #uname -r  查看内核是否高于3.10 #sudo yum update root权限登陆确保yum包最新 #sudo yum remove docker docker-c ...

  8. 选题 Scrum立会报告+燃尽图 02

    此作业要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8683] 一.小组介绍 组长:贺敬文 组员:彭思雨 王志文 位军营 杨萍 ...

  9. jQuery file upload --Multiple File Input Fields in One Form

    The plugin can be applied to a form with multiple file input fields out of the box. The files are se ...

  10. EBS 页面影藏“个性化页”

    以R12.1.3为例 影藏“个性化页”的方法: 修改配置文件: 个性化自助定义        值 由“是”改成“否” 注:修改之后需要清一下高速缓存,如果要显示“个性化页”则做相反配置 修改前: 修改 ...