普通Html文件图片上传(Storing Image To DB)

一、uploadImage.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         window.onload = function () {
 7             //            window.encodeURI();
 8             //            window.encodeURIComponent()
 9 
10             //提交按钮的点击事件。或者是在表单的提交事件
11             document.getElementById(btnSubmit).onclick = function () {
12                 //校验用户上传的文件是否合法
13                 //1.获取用户选择的文件的名称
14                 var fileName = document.getElementById(fileData).value;
15 
16                 //2.获取后缀
17                 var ext = fileName.substring(fileName.lastIndexOf(.));
18                 //3.校验
19                 if (ext == ".jpg" || ext == ".jpeg" || ext == ".png" || ext == ".gif" || ext == ".bmp") {
20                     return true;
21                 } else {
22                     alert(请选择合法的图片文件!);
23                     return false;
24                 }
25             };
26         };
27     </script>
28 </head>
29 <body>
30     <!-------  上传文件------------->
31     <!-- 
32     1.上传客户端表单需要注意的:
33     1>表单的提交方式,必须为post。method="post"
34     2>必须修改表中提交数据时的数据组织方式,设置enctype,enctype="multipart/form-data"
35     默认情况下,表单的enctype设置如下:enctype="application/x-www-form-urlencoded"。设置完毕该项后,其实最终是设置到了请求报文头的Content-Type中,这种设置,表单中最终数据的组织方式是,类似于下面的这种方式:txtName=%E9%9A%9C%E7%A2%8D%E6%98%AF%E5%93%AA%E4%B8%AA&txtPhone=13888888888&txtEmail=[email protected]&selGroups=3
36     //当设置enctype="multipart/form-data",时,数据提交方式,是以分割线的方式来组织的。
37 
38     3>表单中需要有一个文件域。
39     -->    
40     <form action="ProcessUpload.ashx" method="post" enctype="multipart/form-data">
41     <p>
42         请输入您的大名:<input type="text" name="txtName" value="" />
43     </p>
44     <p>
45         请选择要上传的文件:<input id="fileData" type="file" name="fileData" value="" />
46     </p>
47     <input id="btnSubmit" type="submit" value="提交" />
48     </form>
49 </body>
50 </html>

二、一般处理程序

 1 /// <summary>
 2     /// 用来处理上传文件的请求
 3     /// </summary>
 4     public class ProcessUpload : IHttpHandler
 5     {
 6 
 7         public void ProcessRequest(HttpContext context)
 8         {
 9             context.Response.ContentType = "text/plain";
10             //1.获取用户上传的文件
11             if (context.Request.Files.Count > 0)
12             {
13                 //获取第一个文件域中上传上来的文件
14                 HttpPostedFile fileData = context.Request.Files[0];
15 
16                 //判断上传上来的文件字节数是否大于0
17                 if (fileData.ContentLength > 0)
18                 {
19                     string ext = Path.GetExtension(fileData.FileName);
20 
21                     if ((ext == ".jpg" || ext == ".jpeg" || ext == ".png" || ext == ".gif" || ext == ".bmp") && fileData.ContentType.ToLower().StartsWith("image"))
22                     {
23                         #region 计算文件名称和目录,保存文件
24 
25                         //通过guid+旧文件名,计算得到一个新的文件名
26                         string new_fileName = Guid.NewGuid().ToString() + "_" + Path.GetFileName(fileData.FileName);
27 
28 
29                         //获取当前new_fileName的哈希码,就是一个整数。
30                         int hash_code = new_fileName.GetHashCode();
31                         //2.使用该整数和二进制值"1111"(也就是16进制值:0xf)与,获取当前整数的最后4为值。 
32                         int dir1 = hash_code & 0xf;//第一层目录
33                         //任何类都是继承自object类。object类中有一个方法GetHashCode(),获取当前对象的哈希码。
34                         //将原始的hash_code值向右移动4位。、
35                         hash_code = hash_code >> 4;
36 
37                         int dir2 = hash_code & 0xf;//得到了第二层目录
38 
39                         //路径拼接
40                         string targetFilePath = Path.Combine(context.Request.MapPath("upload/"), dir1.ToString(), dir2.ToString());
41                         //判断当前文件夹是否存在,如果不存在则创建文件夹
42                         if (!Directory.Exists(targetFilePath))
43                         {
44                             Directory.CreateDirectory(targetFilePath);
45                         }
46                         //2.将用户上传的文件另存为到服务器的目录下。
47                         //将文件名与目录拼接。
48                         targetFilePath = Path.Combine(targetFilePath, new_fileName);                        
49                         fileData.SaveAs(targetFilePath);
50                         //将文件保存至数据库
51                         SaveFileStreamToDB(targetFilePath);
52 
53                         #endregion
54 
55                         context.Response.Write("文件上传成功!");
56                     }
57                     else
58                     {
59                         context.Response.Write("非法的文件!");
60                     }
61                 }
62             }
63         }
64 
65         /// <summary>
66         /// 保存图片至数据库
67         /// </summary>
68         /// <param name="filePath">图片保存路径</param>
69         public void SaveFileStreamToDB(string filePath)
70         {
71             FileStream fs = new FileStream(filePath, FileMode.Open);
72             byte[] imageBytes = new byte[fs.Length];
73             BinaryReader br = new BinaryReader(fs);
74             imageBytes = br.ReadBytes(Convert.ToInt32(fs.Length));//将图片转换成二进制流
75 
76             Images model = new Images { ImageInfo = imageBytes, ImagePath = filePath };
77             ImagesBll bll = new ImagesBll();
78             int dbCount = bll.insert(model);
79         }
80 
81         public bool IsReusable
82         {
83             get
84             {
85                 return false;
86             }
87         }
88     }

三、DLL数据层

 1 public class ImagesDal
 2     {
 3         //插入操作
 4         public int Insert(Images model)
 5         {
 6             string sql = "insert into storeImageInfo(ImageInfo,ImagePath) values(@imageinfo,@imagepath)";
 7             SqlParameter[] pms = new SqlParameter[] {
 8             new SqlParameter("@imageinfo",System.Data.SqlDbType.Image){ Value=model.ImageInfo},
 9             new SqlParameter("@imagepath",System.Data.SqlDbType.VarChar,200){ Value=model.ImagePath}
10             };
11             return SqlHelper.ExecuteNonQuery(sql, System.Data.CommandType.Text, pms);
12         }
13     }

四、运行结果

  技术分享

 

Then上传成功

 

  技术分享

点击提交后,查看数据库

技术分享

 

占用的数据库大小:

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。