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

最新推荐文章于 2022-06-21 11:24:07 发布

linbai10864

最新推荐文章于 2022-06-21 11:24:07 发布

阅读量82

点赞数

文章标签： CSS JavaScript HTML ViewUI

<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" οnerrοr="imgError()" οnlοad="imgLoad()" id="PhotoImg">
        <form method="POST" name="HwForm" οnsubmit="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>

linbai10864

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
客户端控制file上传图像大小

&lt;html&gt; &lt;head&gt; &lt;title&gt;客户端控制上传图像大小示例&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;style type="t
复制链接

扫一扫