首页 新闻 会员 周边

input的file控件,当图片大于300KB时会不触发onchange()事件

0
悬赏园豆:5 [已解决问题] 解决于 2012-11-19 16:13

我做一个上传头像的功能,用的是input的file控件,当选择了图片后就要判断图片的后缀名和大小,后台用的是HttpFileCollection对象接受的。项现在的问题时,当图片大于300KB时,经常会不触发onchange()事件,也就是说无法进行格式和大小的验证,导致我后面的操作就无法进行,前台代码:

 1  <form id="form1" runat="server" enctype="multipart/form-data">
 2     <div>
 3         <table width="100%" cellspacing="0" cellpadding="0">
 4             <tr class="alternate">
 5                 <td>
 6                     照片:
 7                 </td>
 8                 <td align="left">
 9                     <input id="File1" type="file" name="File1" style="width: 260px" onchange="LoadImg()" />
10                     <br />
11                     <span id="spMessage" />
12                 </td>
13             </tr>
14             <tr class="alternate" style="height: 50px">
15                 <td colspan="2" align="right">
16                 </td>
17             </tr>
18             <tr class="alternate">
19                 <td colspan="2" align="right">
20                     <input type="button" id="btnOK" class="c6ui-button" runat="server" value="确定" onclick="Check()"
21                         data-img="../Images/ico_10.gif" />
22                     <input type="button" id="btnCal" class="c6ui-button" name="btnCal" value="取消" onclick="top.Dialog.Close();"
23                         data-img="../Images/delete.gif" /><asp:LinkButton ID="LinkButton1" runat="server"
24                             OnClick="LinkButton1_Click"></asp:LinkButton>
25                 </td>
26             </tr>
27         </table>
28         <input type="hidden" id="HidImgPath" runat="server" />
29     </div>
30     </form>

JS事件:

 1    <script language="javascript" type="text/javascript">
 2         var MyObject = (window.dialogArguments) ? window.dialogArguments : top.Dialog.Arguments;
 3         //保存
 4         function btnSave(btn) {
 5             theForm.__EVENTTARGET.value = btn;
 6             theForm.__EVENTARGUMENT.value = "";
 7             theForm.submit();
 8         }
 9         function LoadImg() {
10             document.getElementById("spMessage").innerHTML = "图片路径是:" + document.getElementById("File1").value;
11             btnSave('btnOKSave');
12         }
13 
14         //回调事件
15         function Check() {
16             var ImgPath = document.getElementById("HidImgPath").value;
17             if ("" == ImgPath && null == ImgPath && "undefined" == ImgPath) {
18                 openAlertDialog("请选择大小150*150以内的照片。", "OK", function() { jQuery("#SelFacultyFacultyType").focus(); });
19                 return false;
20             } else {
21                 window.returnValue = ImgPath;
22                 MyObject.AddImgCallBack(window.returnValue);
23                 top.Dialog.Close();
24             }
25         }
26 
27     </script>

后台事件:

 1  protected void Page_Load(object sender, EventArgs e)
 2         {
 3             if (IsPostBack)
 4             {
 5                 if (!string.IsNullOrEmpty(Request.Params["__EVENTTARGET"].ToString()))
 6                 {
 7                     string tpe = Request.Params["__EVENTTARGET"].ToString();
 8                     if ("btnOKSave" == tpe)
 9                     {
10                         UpFileImages();  //上传图片(控件上传)
11                     }
12                 }
13             }
14         }
15         #region 上传图片(控件上传)
16         /// <summary>
17         /// 上传图片
18         /// </summary>
19         private void UpFileImages()
20         {
21             System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
22             StringBuilder strmsg = new StringBuilder();
23             int ifile;
24             for (ifile = 0; ifile < files.Count; ifile++)
25             {
26                 if (files[ifile].FileName.Length > 0)
27                 {
28                     System.Web.HttpPostedFile postedfile = files[ifile];
29                     if (postedfile.ContentLength > 1024 * 1024)//1MB 
30                     {
31                         strmsg.Append("图片大小不能大于1MB,请重新添加头像。");
32                         break;
33                     }
34                     string fex = Path.GetExtension(postedfile.FileName);//后缀名
35                     fex = fex.Remove(0, 1).ToUpper(); //去掉.
36                     if (fex != "JPG" && fex != "GIF" && fex != "BMP" && fex != "PNG")
37                     {
38                         strmsg.Append("请上传[.JPG, .PNG, .GIF, .BMP]中任意格式的图片。");
39                         break;
40                     }
41                 }
42             }
43             StringBuilder strmsg1 = new StringBuilder();
44             if (strmsg.Length <= 0)//说明图片大小和格式都没问题 
45             {
46                 for (int i = 0; i < files.Count; i++)
47                 {
48                     System.Web.HttpPostedFile myFile = files[i];
49                     string FileExtention = string.Empty;
50                     string FileName = System.IO.Path.GetFileName(myFile.FileName);
51                     if (FileName.Length > 0)//有文件才执行上传操作再保存到数据库 
52                     {
53                         FileExtention = System.IO.Path.GetExtension(myFile.FileName);//后缀名
54                         string filepath = myFile.FileName;//C:\Documents and Settings\Administrator\My Documents\My Pictures\20022775_m.jpg 
55                         string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);//20022775_m.jpg 
56                         int idx = filename.LastIndexOf(".");
57                         string suffix = filename.Substring(idx);//获得上传的图片的后缀名 
58                         string pictureName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + suffix; //精确到毫秒防止相同名称+后缀名
59                         string serverpath = Server.MapPath("images/") + pictureName;
60                         this.HidImgPath.Value = pictureName;
61                         myFile.SaveAs(serverpath);
62                     }
63                 }
64                 if (strmsg1.Length > 0)
65                 {
66                     if (!(HttpContext.Current.Handler as Page).ClientScript.IsStartupScriptRegistered(typeof(string), ""))
67                     {
68                         (HttpContext.Current.Handler as Page).ClientScript.RegisterStartupScript(typeof(string), "", strmsg1.ToString(), true);
69                     }
70                 }
71             }
72             else
73             {
74                 if (!(HttpContext.Current.Handler as Page).ClientScript.IsStartupScriptRegistered(typeof(string), ""))
75                 {
76                     (HttpContext.Current.Handler as Page).ClientScript.RegisterStartupScript(typeof(string), "", "alert('" + strmsg.ToString() + "')", true);
77                 }
78             }
79         }
80         #endregion

当文件大于300KB后,不进后台。我换了一些方式,不用onchange()事件,用按钮来实现上传,但问题依然存在。当文件大于300KB后,我有验证提示他一个不执行,调试他也走到了,但就是页面没有任何反应,不知道这个控件在浏览完图片后进行了什么处理导致的?

xiao99的主页 xiao99 | 初学一级 | 园豆:188
提问于:2012-08-23 09:36
< >
分享
最佳答案
0

上传的话,我建 议你用jquery uploadify 来实现吧。

至于你说的300k 就不触发onchange() 事件,我有点没看明白。应该不会这样的,

收获园豆:5
jerry-Tom | 老鸟四级 |园豆:4077 | 2012-08-23 10:31

楼主,你用uploadify来搞定吧,非常的方便。

http://www.cnblogs.com/chenping-987123/archive/2010/09/25/1834372.html

大小和格式的验证都是配置的,不需要自己来写验证。

chenping2008 | 园豆:9836 (大侠五级) | 2012-08-23 14:36
其他回答(2)
0

用.net的控件不行吗??

羽商宫 | 园豆:2490 (老鸟四级) | 2012-08-23 11:05
0

file的onchange是有这个问题,但跟图片大小没关。

每次执行完onchange事件后,需要把原来的file干掉,重新生成一个新的file。

向往-SONG | 园豆:4853 (老鸟四级) | 2012-08-23 11:12

这个问题我也碰到过。你有没有碰到导入文件名长度很长的时候,不触发onchange事件的问题。怎么解决的?

支持(0) 反对(0) 乐雨 | 园豆:200 (初学一级) | 2013-05-20 14:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册