客户端控制file上传图像大小 -

yj10864

浏览: 84547 次
性别:
来自: 西安

最近访客更多访客>>

baimin7657

liangzi1227

冰糖葫芦有点酸

空城旧梦why

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

客户端控制file上传图像大小

CSS JavaScript HTML

<html>
    <head>
        <title>客户端控制上传图像大小示例</title>
        <meta http-equiv="Content-Type" content="text/html;   charset=gb2312">
		<style type="text/css">
			.img_css{
				
				width:100px;
				height:80px;
			}
		</style>
		  <SCRIPT LANGUAGE="JavaScript">
            <!--
            var FileMaxSize = 100;//限制上传的文件大小，单位(k)   
            function chkform(){
                if (document.HwForm.Photo.value == "") {
                    alert("请选择照片");
                    document.HwForm.Photo.focus();
                    return false;
                }
                if (document.HwForm.PhotoFileSize.value <= 0) {
                    alert("请重新选择照片");
                    document.HwForm.Photo.focus();
                    return false;
                }
                if (document.HwForm.PhotoFileSize.value > FileMaxSize * 1024) {
                    alert("选择的照片超过" + FileMaxSize + "K，请重新选择");
                    document.HwForm.Photo.focus();
                    return false;
                }
                alert("可以提交，当前为测试...");
                return false;
            }
            
            function imgError(){
                document.all.PhotoFileSize.value = '-1';
                alert('请选择一个图像文件');
            }
            
            function imgLoad(){
			//alert(document.getElementById('PhotoImg').fileSize);
                if (document.getElementById('PhotoImg').fileSize <= 1024 * FileMaxSize) {
                    document.all.PhotoFileSize.value = document.getElementById('PhotoImg').fileSize;
                }
                else {
                    alert('图片不能大于' + FileMaxSize + 'K，请重新选择');
                    document.all.PhotoFileSize.value = '-1';
                }
            }

			function fileOnpropertychange(){
				if(document.HwForm.Photo.value!='') {
					document.getElementById('PhotoImg').src=document.HwForm.Photo.value;
				}
			}
            
            //-->   
        </SCRIPT>
    </head>
    <body>
            <!--以下是一个客户端控制file上传图像大小的一个示例，由于是客户端限制，所以用户可以绕过这个限制。-->
        <p>
		<IMG class="img_css" onerror="imgError()" onload="imgLoad()" id="PhotoImg">
        <form method="POST" name="HwForm" onsubmit="return(chkform());" enctype="multipart/form-data">
            照片：<input type="file" name="Photo" onpropertychange="fileOnpropertychange()"/>
			<input size="3" type="hidden" name="PhotoFileSize" value="-1" />
			<input type="submit" value="提交"><input type="reset" value="重置">
        </form>
    </body>
</html>

分享到：