我做一个上传头像的功能,用的是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后,我有验证提示他一个不执行,调试他也走到了,但就是页面没有任何反应,不知道这个控件在浏览完图片后进行了什么处理导致的?
上传的话,我建 议你用jquery uploadify 来实现吧。
至于你说的300k 就不触发onchange() 事件,我有点没看明白。应该不会这样的,
楼主,你用uploadify来搞定吧,非常的方便。
http://www.cnblogs.com/chenping-987123/archive/2010/09/25/1834372.html
大小和格式的验证都是配置的,不需要自己来写验证。
用.net的控件不行吗??
file的onchange是有这个问题,但跟图片大小没关。
每次执行完onchange事件后,需要把原来的file干掉,重新生成一个新的file。
这个问题我也碰到过。你有没有碰到导入文件名长度很长的时候,不触发onchange事件的问题。怎么解决的?