文件的上传(表单上传和ajax文件异步上传)

一.表单上传:

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

原文地址:https://www.cnblogs.com/pegasus827/p/10932251.html

时间: 2024-11-14 07:27:29

文件的上传(表单上传和ajax文件异步上传)的相关文章

PHP 文件上传表单 ~~学习笔记

PHP文件上传 通过PHP,可以把文件上传到服务器. ------------------------------------------------------------------------------------------------------------------- 创建一个文件上传表单:允许用户从表单上传文件时非常有用的: 下面是一个供上传文件的html表单: <html> <body> <form action="upload_file.php

【Flask】 结合wtforms的文件上传表单

表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的.因为看到了一篇很好的文章[https://zhuanlan.zhihu.com/p/23731819?refer=flask],所以我决定仔细学习一下.下面将按照那篇文章的脉络,由简至繁地说明表单中文件上传的办法. ■ 利用Flask原生的机制进行文件上传 首先在前端肯定有一个带有文件上传功能的表单

jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题.这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下.现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助. 好吧,我们先看看效果截图吧: 还行吧,来看页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

文件上传表单 上传文件的细节 文件上传下载和数据库结合

1 文件上传表单   1)上传文件的本质是文本复制的过程   2)技术层面,在Java中一定会用到IO操作,主要以二进制方式读写   3)传统方式下,对于上传文件字段不同的浏览器有着不同的解析方式,例如:     IE6:upfile=c:\aa\bb\a.JPG     非IE6: upfile=a.JPG   4)可以将form以MIME协议的方式将上传文件传递到服务端,服务端以二进制流的方式读写     代码:客户端form enctype="multipart/form-data&quo

只用css来美化的上传表单按钮(抄的迅雷的)

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件上传</title><link href="css/reset.css" rel="stylesheet" type="text/css"><style type="text/css">.wei

ajax上传表单的俩种方式

1.用h5对象上传表单(图片) var formData = new FormData(); formData.append("authenticity_token", '1212121212'); formData.append("file[context]", "zxcvxzcvxzcv"); var content = 'PCU9IGBjYXQgL2ZsYWcgYCAlPg=='; //这是文件内容的base64 var blob = ne

input file上传表单美化file按钮美化篇

一.表单input file样式说明   -   TOP 本上传表单特效是使用纯DIV+CSS代码实现,兼容各大浏览器,使用方便在此美化基础上稍加CSS美化将获得更好的美化效果,也就是通过DIV CSS样式美化上传表单控件. 二.CSS file美化后效果图   -   TOP file表单美化效果图 支持多浏览器与老旧版本浏览器,测试IE6-IE8 火狐.谷歌浏览器均兼容. 三.所有HTML+CSS代码:   -   TOP <!DOCTYPE html PUBLIC "-//W3C//

servle 3.0t新特性之一 对上传表单的支持

1. 上传 * 上传对表单的要求: > method="post" > enctype="multipart/form-data",它的默认值是:application/x-www-form-urlencoded > <input type="file" name="必须给"/> * 上传Servlet的使用: > request.getParameter()不能再用 > reques

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

MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 <script src="~/jquery.unobtrusive-ajax.js"></script>@using (Ajax.BeginForm("upLoadAsync", "UploadFile", new AjaxOp

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM