图片选择,预览及上传

/

当我们在前台提交图片到后台,并且,在后台获取到之后,下一步,我们要做的就是上传图片了,代码如下

 1     // 以‘.‘、‘..‘、‘~‘开头的路径,均为相对路径(推荐使用)
 2     // 以盘符‘C:‘、‘D:‘,等开头的,均为绝对路径
 3     // 上传路径,可以任意修改
 4     string path = "~/upload";
 5 
 6     // 获取上传的文件名(包含后缀)
 7     string FileName = file.FileName;
 8 
 9     // 获取上传绝对路径,若path初始值就是绝对路径,可以忽略不写
10     path = Server.MapPath(path);
11 
12     // 检测是否存在此路径,没有就创建
13     // 需引用命名空间,using System.IO;
14     if (!Directory.Exists(path))    
15         // 创建路径
16         Directory.CreateDirectory(path);
17 
18     // 上传文件
19     file.SaveAs(path + FileName);

其实写到这里图片上传就已经成功了,但是,凡事都会有个但是!!

原生的input选择图片之后,只能显示一个文件名吧,如果我们想选择图片之后,立刻能够看到我们选择的图片,那么问题就来了,怎么办???

曾经做过一次这种效果,当然,灰常麻烦,早就不用了,不过大概的思路还是讲讲吧

  1. 给input加一个onchange事件,每次选择的文件修改之后就会触发
  2. 在onchange事件中添加一个方法(Uoplad),这个方法要执行的功能就是提交input所在的form表单
  3. 提交form表单后,在后台将提交上来的图片文件保存在指定位置(path)
  4. 这时候path位置肯定有那张图片,在方法Upload中,我们就可以直接取path位置拿图片,更新一下指定img的src属性就好

这样写是可以实现图片选择之后,立刻显示的效果的,操作麻烦不说,问题也有很多,如果我们一直挑选图片,那些被我们挑过但是不用的图片都会被上传,大量的垃圾数据就这样产生了,而且,反复提交form表单,对网站的负担也会比较大的,都说度娘是万能的,果不其然,找了很久之后,终于被我找到了一个非常不错的方法

前端js方法:

 1    // 选择图片预览方法
 2    // ImgID,显示预览图片的img标签id
 3    // FileInputID,选择文件的input标签id
 4    // MaxLen >,能选择的最大文件大小(单位:mb),默认2M,可以忽略不填
 5     function ChangImg(ImgID, FileInputID, MaxLen >h = 2.0) {
 6 
 7         // 触发Input单击事件
 8         $("#" + FileInputID).click();
 9 
10         // Input单击执行
11         $("#" + FileInputID).on("change", function () {
12 
13             //设置上传的文件最大值(单位:M),超过此值则不上传。
14             var flen >h = MaxLen >h;
15             var size = this.files[0].size;
16 
17             size = (size / 1024 / 1024).toFixed(2);
18 
19             // 判断是否超过最大大小
20             if (size  MaxLen >h) {
21                 alert("所选文件大小:" + size + " M,最大文件大小:" + MaxLen >h + " M");
22 
23                 // 清空Fileinput的值
24                 if (this.outerHTML)
25                     this.outerHTML = this.outerHTML;
26                 else
27                     this.values = "";
28 
29                 // 显示默认图片
30                 $("#" + ImgID).attr("src", ‘/upload/Click.png‘);
31                 return;
32             }
33 
34             // 获取图片的路径,该路径不是图片在本地的路径
35             var objUrl = null;
36 
37             // 为文件创建一个Url对象,可能会有一点点兼容性问题
38             objUrl = window.URL.createObjectURL(this.files[0]);
39 
40             if (objUrl)
41                 // 将图片路径存入src中,显示出图片
42                 $("#" + ImgID).prop("src", objUrl);
43 
44         });
45     }

感谢那位不知名的大神,我在他的基础上进行了修改,添加了文件大小验证,因为默认只能上传两兆还是四兆的文件来着,不记得了,反正不大,如果你没有修改默认配置,而你选择的文件又偏偏超过了这个范围,提交form表单的时候绝对会炸的你不要不要的,,,

至于这个方法怎么用,我也大概的写了一套模板,跟着模板来肯定是没问题的

前端HTML代码:

 1    !-- 
 2          必须添加 enctype = "mu< ipart/form-data" 属性,否则后台无法接收到上传的文件!!
 3          我是基于MVC实现的,其他的其实也一样,略微修改就好
 4          嗯,我也没有加CSS,你们随意加,,
 5          --
 6     form action="/Home/Upload"  enctype = "mu< ipart/form-data"
 7         p
 8             label选择图片:/label
 9             label
10                 !-- 预览的图片,单击它就可以选择图片 --
11                 img src="~/images/Click.png" id="pic" title="单击选择图片" onclick="ChangImg(‘pic‘,‘upload‘)" /
12                 !-- 单击图片,其实触发的是它的单击事件,将其隐藏起来更美观 --
13                 input type="file" accept="image/*" id="upload" style="display:none;" /
14             /label
15         /p
16         !-- 单击按钮,即可开始上传 --
17         p input type="submit" value="开始上传" //p
18     /form

后台代码:

  1         // 
  2         public ActionResu<  Upload(){
  3             // 参数看着给,所有的参数都有默认值,都可以修改成自己常用的值
  4             string fileUrl = SaveFile();
  5 
  6             // 若要获取多文件上传的值,使用splitChar参数的值进行分割就好,默认splitChar=‘;‘,即
  7             // string[] res=fileUrl.Split(‘;‘);
  8 
  9             // 判断fileUrl是否为空,若为空,表示没有上传文件
 10             if(string.IsNullOrEmpty(fileUrl))
 11                 return Content("上传失败!");
 12             // 不为空时,上传成功
 13             else
 14                 return Content("上传成功!");
 15         }        
 16 
 17 
 18         #region 图片上传,此方法可以通用
 19         
 20         /// summary
 21         /// 上传图片
 22         /// /summary
 23         /// param name="type"存储方式,默认按年份分类/param
 24         /// param name="path"上传路径,默认值可以更改为自己常用的地址/param
 25         /// param name="IsUrl"是否返回路径,若不返回路径,就返回文件名称/param
 26         /// param name="format"文件名格式/param
 27         /// param name="splitChar"多文件路径分割符/param
 28         /// returns默认返回图片上传的相对路径,IsUrl为false时,返回图片名称/returns
 29         public string SaveFile(SaveType type = SaveType.ForYear, string path = "~/upload/",bool IsUrl=true, string format = "yyyyMMddHHmmssffff", char splitChar = ;) {
 30             // 返回所有的上传路径,以splitChar分割
 31             string resUrl = "";
 32             // 图片格式数组
 33             string[] imgFormat = { ".bmp", ".gif", ".png", ".jpg", ".jpeg" };
 34 
 35             // 循环所有的上传文件
 36             for (int i = 0; i  Request.Files.Count; i++) {
 37 
 38                 // 上传图片
 39                 HttpPostedFileBase file = Request.Files[i];
 40                 string FileName = file.FileName; // 上传的原文件名
 41 
 42                 if (FileName.Len >h  0) {
 43 
 44                     // 获取文件后缀名
 45                     string Suffix = FileName.Substring(FileName.LastIndexOf(.));
 46 
 47                     // 判断文件是否为图片,若不是图片,跳出,检测下一个文件
 48                     if (Array.IndexOf(imgFormat, Suffix) == -1)
 49                         continue;
 50 
 51                     // 拼接文件名称
 52                     DateTime dateNow = DateTime.Now;
 53                     FileName = dateNow.ToString(format) + Suffix;
 54 
 55                     // 根据存储方式,修改路径
 56                     // 增加年份文件夹
 57                     if (Convert.ToInt32(type) = 1)
 58                         path += dateNow.Year + "/";
 59                     // 增加月份文件夹
 60                     if (Convert.ToInt32(type) = 2)
 61                         path += dateNow.Month + "/";
 62                     // 增加年份文件夹
 63                     if (Convert.ToInt32(type) = 3)
 64                         path += dateNow.Day + "/";
 65 
 66                     // 若有多个文件要上传,将它们一一进行拼接
 67                     if (!string.IsNullOrEmpty(resUrl))
 68                         resUrl += splitChar;
 69     
 70                     // 若返回相对路径(默认)
 71                     if(IsUrl)
 72                         // .Substring(1),用于去掉第一个字符‘~‘,可视情况修改或去掉
 73                         resUrl += (path + FileName).Substring(1);
 74                     // 若返回文件名称
 75                     else
 76                         resUrl += FileName;
 77 
 78                     // 获取上传绝对路径
 79                     path = Server.MapPath(path);
 80 
 81                     // 检测是否存在此路径,没有就创建
 82                     if (!Directory.Exists(path))
 83                         // 创建路径
 84                         Directory.CreateDirectory(path);
 85 
 86                     // 上传图片
 87                     file.SaveAs(path + FileName);
 88                 }
 89             }
 90             return resUrl;
 91         }
 92 
 93         /// summary
 94         /// 文件存储方式,枚举
 95         /// /summary
 96         public enum SaveType {
 97             /// summary
 98             /// 直接上传至指定目录
 99             /// /summary
100             ForNone = 0,
101             /// summary
102             /// 按年份区分上传,每一年的图片在同一个文件夹
103             /// /summary
104             ForYear = 1,
105             /// summary
106             /// 按月份区分上传,每个月的图片在同一个文件夹
107             /// /summary
108             ForMonth = 2,
109             /// summary
110             /// 按天份区分上传,每一天的图片在同一个文件夹
111             /// /summary
112             ForDay = 3
113         }
114         #endregion

嗯,到这就差不多,能耐心读到这里的都是一个好读者啊,嘿嘿,谢啦,希望能对你们有所帮助,,,

图片选择,预览及上传

原文地址:http://www.cnblogs.com/Onlooker/p/7256949.html


最新回复(0)
/jishuEiu_2BDRoKFv7TCXFJfiSDWIHitUNZeLIVr0qBcJqbrl8_3D4719390
8 简首页