几种上传控制大小代码
2007-01-13 16:53
295 查看
<SCRIPT> function getImageDimension (imgURL, loadHandler) { var img = new Image(); img.onload = loadHandler; if (document.layers && location.protocol.toLowerCase() != 'file:' && navigator.javaEnabled()) netscape.security.PrivilegeManager.enablePrivilege( 'UniversalFileRead' ); img.src = imgURL; } function getFileSize (fileName) { if (document.layers) { if (navigator.javaEnabled()) { var file = new java.io.File(fileName); if (location.protocol.toLowerCase() != 'file:') netscape.security.PrivilegeManager.enablePrivilege( 'UniversalFileRead' ); return file.length(); } else return -1; } else if (document.all) { window.oldOnError = window.onerror; window.onerror = function (err) { if (err.indexOf('utomation') != -1) { alert('file access not possible'); return true; } else return false; }; var fso = new ActiveXObject('Scripting.FileSystemObject'); var file = fso.GetFile(fileName); window.onerror = window.oldOnError; return file.Size; } } function showImageDimensions () { alert(this.width + 'x' + this.height); } </SCRIPT> <SCRIPT> function checkImageDimensions (fileName) { var imgURL = 'file:///' + fileName; getImageDimension(imgURL, showImageDimensions); } </SCRIPT> <INPUT TYPE="file" NAME="fileName"> <BR> <INPUT TYPE="button" VALUE="check file size" ONCLICK="alert(getFileSize(this.form.fileName.value))"> <BR> <INPUT TYPE="button" VALUE="check image dimensions" ONCLICK="checkImageDimensions(this.form.fileName.value)"> <script language="Jscript"> function chksize(strFileName){ var maxsize = 100; //定义允许文件的大小,单位KB,请根据需要自行修改! var objStream = new ActiveXObject("ADODB.Stream"); objStream.Type = 1; objStream.Open(); objStream.LoadFromFile(strFileName); if(Math.round(objStream.Size/1024,2)>maxsize) {alert ("抱歉!您选择的文件为 "+Math.round(objStream.Size/1024,2)+" KB /n超过了程序"+maxsize+" KB 的限制!"); document.form1.reset(); return false; } } </script> <form name="form1" action="" method="post"> <input type="file" name="Upfile" onchange="chksize(this.value)"> </form> |
<html> <input type="file" name="file1" onchange="ShowSize(this.value)"> <script language="JavaScript"> <!-- function ShowSize(files) { var fso,f; fso=new ActiveXObject("Scripting.FileSystemObject"); f=fso.GetFile(files); if(f.size>1024*4){ alert(f.size+" Bytes"); } } //--> </script> </html> |
<html> <head> <title>Upload Image</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="IUpload" action="upfile.asp" method="post"> <p><input type="file" name="picsrc" size="40" onchange="picshow.src=document.IUpload.picsrc.value"> <input type="button" value="上载" onclick="detect()"></p></form> <p><img name="picshow" title="图像预览"></p> </body> </html> <SCRIPT LANGUAGE="JavaScript"> <!-- function imgExceedSize(w,h){ if(!document.IUpload.picsrc.value==""){ if(picshow.width>w||picshow.height>h){ alert("图像尺寸:"+picshow.width+"X"+picshow.height+"。////n图像尺寸过大!你只能上传尺寸为 "+w+"×"+h+"的图像,请重新浏览图片!"); return true; }else{ return false; } }else{ return true; } } function detect(){ var ok=imgExceedSize(50,50); if(ok){ document.IUpload.reset(); }else{ document.IUpload.submit(); } } //--> </SCRIPT> |
文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。不过在IE下img有几个附加的属性,如:fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters,我们可以通过这些属性来获取图片文件的部分信息,如文件大小,我们用file表单同img标签结合,就能够在上传之前判断图片文件的大小是否合法了 限制:<FORM id="Form1" encType="multipart/form-data" Runat="Server"> <CENTER><input type="hidden" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"> //设置一个控制大小的按钮,Value值。 文件位置:<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)" onpropertychange="document.all.fileChecker.src='file:///'+this.value" runat="server"><BR> 图片预览:<img id="fileChecker" height="65" width="82" border="0" alt="图片预览"> <BR> <div id="blockDiv" style="VISIBILITY:visible" align="center"><ASP:BUTTON id="Button1" onclick="Upload" Runat="Server" Text="上传"></ASP:BUTTON> <INPUT type="reset" value="重置"></div> <HR> <H1><ASP:LABEL id="Result" Runat="Server"></ASP:LABEL></H1> </CENTER> </FORM> <script type="text/javascript"> ns4 = (document.layers)? true:false ie4 = (document.all)? true:false var oFileChecker = document.getElementById("fileChecker"); function changeSrc(filePicker) { oFileChecker.src = filePicker.value; } oFileChecker.onreadystatechange = function () { if (oFileChecker.readyState == "complete") { checkSize(); } } function showObject() { //符合就显示 if (ns4) document.blockDiv.visibility = "show" else blockDiv.style.visibility = "visible" } function hideObject() { //超过大小就隐藏上传按钮 if (ns4) document.blockDiv.visibility = "hide" else blockDiv.style.visibility = "hidden" } function checkSize() { var limit = document.getElementById("fileSizeLimit").value * 1024*102.4; //设置大小 if (oFileChecker.fileSize > limit) { alert("图片大小不能超过1M"); hideObject(); } else { showObject(); } } </script> 另外补充一些手册里的东西: <input type="hidden" name="MAX_FILE_SIZE" value="30000" /> MAX_FILE_SIZE 隐藏字段(单位为字节)必须先于文件输入字段,其值为接收文件的最大尺寸。这是对浏览器的一个建议,PHP 也会检查此项。在浏览器端可以简单绕过此设置,因此不要指望用此特性来阻挡大文件。实际上,PHP 设置中的上传文件最大值是不会失效的。但是最好还是在表单中加上此项目,因为它可以避免用户在花时间等待上传大文件之后才发现文件过大上传失败的麻烦。 if (oFileChecker.width > 100) { alert("too long"); } .... if (oFileChecker.height > 100) { alert("too high"); } |
相关文章推荐
- silverlight中用代码动态控制Storyboard(动画)属性的几种方法
- js 图片上传前大小长宽验证代码
- 精灵原大小(用代码控制转换不同精灵时)
- php中检测上传文件类型与上传图片大小代码
- 用代码控制新建Console的位置大小
- 控制上传文件大小类型
- iOS- 浅谈纯代码控制UIViewController视图控制器跳转界面的几种方法
- asp.net2.0实现文件上传,控制上传文件大小,类型
- jquery控制上传文件格式、大小以及图片预览功能
- 上传图片超出大小进行缩小控制
- javascript检测(控制 )上传文件大小
- 图片上传之前检查大小、尺寸、格式并预览的js代码
- Struts2 控制文件上传下载功能实例代码
- SpringMVC中的文件上传(大小超限跳转控制)
- js获取上传文件大小示例代码
- iis上传文件的大小控制
- 通过JavaScript控制字体大小的代码
- .NET附件上传大小限制控制
- 上传图片并且生成可以控制大小图片清晰度的方法
- JS控制上传文件大小