zoukankan      html  css  js  c++  java
  • webform文件上传、图片水印、验证码

    文件上传:

      所用控件:FileUpload

      使用时的思路:

      1、判断用户是否选中了文件

        FileUpload.FileName获取选中的文件名,判断长度,如果长度大于零就代表已经选择了文件

        JS端:通过ID获取控件,然后控件的value获取选中的文件名

      2、将文件保存到服务器上

        FileUpload.SaveAs("绝对路径");

      3、获得绝对路径

        先编写相对路径:比如"UpLoads/abc.txt"

        再把路径映射成绝对路径:Server.MapPath("UpLoads/abc.txt");

      4、保留原文件的类型和文件名

        相对路径改为"UpLoads/" + FileUpload1.FileName;

      5、防止文件重名覆盖的问题

        "UpLoads/" + Request.Cookies["user"].Value + DateTime.Now.ToString("yyyyMMddhhmmssms") + FileUpload1.FileName;

        也就是在文件名前面拼接上登陆的用户名以及操作的时间,精确到毫秒

      6、限制用户可选的文件类型

        给控件添加属性accept=".jpg,.png,.jpeg,.txt"

        但在打开的对话框中,仍然可以选择全部文件,只能通过JS端来限制:  

    document.getElementById("Button1").onclick = function () {
            var fileName = document.getElementById("FileUpload1").value;
            
            var name = fileName.substr(fileName.length - 4, 4);
            var name1 = fileName.substr(fileName.length - 5, 5);
            if (name != ".jpg" && name != ".png" && name != ".txt" && name1 != ".jpeg")
            {
                alert("请选择正确的文件!你要找事儿啊??");
                return false;
            } 
        };

      7、控制上传文件的大小

        扩容(系统默认文件最大4MB):    

          webconfig配置文件中写入

          <system.web>

          <compilation debug="false" targetFramework="4.0" />

          <httpRuntime maxRequestLength="40000" />

          </system.web>

          注:不要扩的太多,这样上传会占用服务器内存,如果同时上传人数过多会导致服务器内存溢出

        限制大小:

          C#端限制:

        if (FileUpload1.PostedFile.ContentLength>(4*1024*1024))
            {
                Label1.Text = "文件长度过长!!!";
                return;
            }

           JS端限制:

        var f = document.getElementById("FileUpload1");
    
            if (f.files[0].size > (4 * 1024 * 1024)) {
                alert("文件过大!!!");
                return false;
            }

    上传图片加水印:

      其实是利用C#中的绘制,需要引命名空间System.Drawing;

      

    void Button1_Click(object sender, EventArgs e)
        {
            //准备画布
            System.Drawing.Image img = System.Drawing.Image.FromStream(FileUpload1.FileContent);
            //创建画笔
            Graphics g = Graphics.FromImage(img);
    
            string s = "汉企奇点网络0928";
            //画笔的字体
            Font f = new Font("微软雅黑",20);
            //画笔的样式和颜色
            Brush b = new SolidBrush(Color.Red);
            //在什么位置画
            PointF p = new PointF(20,20);
            //画字符串
            g.DrawString(s, f, b, p);
    
            string sss = "images/"+DateTime.Now.ToString("yyyyMMddhhmmssms")+FileUpload1.FileName;
    
            img.Save(Server.MapPath(sss));
    
            Image1.ImageUrl = sss;
        }

    图片验证码:

      单独为验证码图片创建一个窗体,界面上什么都不用写,在后台中绘制

      

    protected void Page_Load(object sender, EventArgs e)
        {
            Bitmap img = new Bitmap(80, 40);
            Graphics g = Graphics.FromImage(img);
            Random r = new Random();
            //创建一个颜色集合 或者也可以通过RGBA颜色直接随机生成
            List<Color> clist = new List<Color>();
            clist.Add(Color.Yellow);
            clist.Add(Color.Green);
            clist.Add(Color.Blue);
            clist.Add(Color.Pink);
            clist.Add(Color.Orange);
            clist.Add(Color.Black);
            //绘制背景色
            g.FillRectangle(new SolidBrush(clist[r.Next(0, clist.Count)]), 0, 0, 80, 40);
            //循环随机绘制干扰线
            for (int i = 0; i < 10; i++)
            {
                Color ccc = clist[r.Next(0, clist.Count)];
    
                Pen ppp = new Pen(new SolidBrush(ccc), r.Next(1, 5));
    
                g.DrawLine(ppp, new PointF(r.Next(0, 80), r.Next(0, 40)), new PointF(r.Next(0, 80), r.Next(0, 40)));
            }
            //准备一些字母数字
            string all = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            string s = "";
            //从上面随机出四个字符拼接
            for (int i = 0; i < 4; i++)
            {
                int a = r.Next(all.Length);
                s += all.Substring(a, 1);
            }
            //存入Session
            Session["YZM"] = s;
            //绘制出验证码
            g.DrawString(s, new Font("微软雅黑", 16), new SolidBrush(Color.Red), new PointF(3, 3));
            //通过流把绘制好的验证码输出出去
            img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);
            Response.End();
        }

      验证:

     void Button1_Click(object sender, EventArgs e)
        {
            string t1 = TextBox1.Text;
            string t2 = Session["YZM"].ToString();
    
            if (t1.ToUpper() == t2.ToUpper())
            {
                Label1.Text = "验证成功!";
            }
            else
            {
                Label1.Text = "验证失败!";
            }
        }

      当验证码不清晰时,点击验证码图片重新生成一个,写在JS里:

    <script type="text/javascript">
        var a = 0;
        document.getElementById("Image1").onclick = function () {
            this.setAttribute("src", "yzm.aspx?id=" + a);
            a++;
        }
    </script>

     

      

      

  • 相关阅读:
    分别使用vue和react创建一个可伸缩的树
    渲染一颗树(分别使用vue和react创建)
    n皇后问题JS实现(N-Queens)
    中序遍历二叉树(js)
    LeetCode 258 Add Digits
    js二维数组去重
    js 数组中sort方法存在的问题
    原生js实现一个简单轮播效果
    原生js实现一个连连看小游戏(三)-----------点击列表获取索引
    js生成随机不重复数字的几种方法
  • 原文地址:https://www.cnblogs.com/wt627939556/p/6256824.html
Copyright © 2011-2022 走看看