前端限制上传文件的大小

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jiajiajiazaijia/article/details/77966042

        在很多时候我们需要限制用户上传文件的大小。大致限制文件大小可以从前端和服务端限制。这里单说前端限制。

<script type="text/javascript">
function artwork(picfile, picId, oldPic,pic){ 
if(getFileSize(pic)){
return false;
}
return true;
     }
        function getFileSize(pic) {
            try {
                var size = 0;
               console.log(document.getElementsByClassName(pic)[0].value)
                if ($.browser.msie) {//ie旧版浏览器
                    var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
                    var filePath = document.getElementsByClassName(pic)[0].value;
                    var fileObj = fileMgr.getFile(filePath);
                    size = fileObj.size; //byte
                    size = size / 1024;//kb
                } else {//其它浏览器
                    size = document.getElementsByClassName(pic)[0].files[0].size;//byte
                    size = size / 1024;//kb
                }
if(size>500){
alert('上传图片最大为500K');
document.getElementsByClassName(pic)[0].value="";
return true;
}
return false;
            } catch (e) {
                alert("错误：" + e);
            } 
}
</script>

<div style="clear: both;">
<input type="hidden" name="RESIZE_pic" id="RESIZE_picimge" />
<input type="hidden" value="${imgUrl }" name="imgUrl" id="imgUrl" />
<input value="上传" type="file" name="pic" id="pic"  title="图片不能大于500K" onchange="artwork(this, 'picimge', 'imgUrl','pic');" class="pic Bgray"/>                          

 </div>