用html做上传图片时，怎样限制上传图片的尺寸？

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

我用做上传图片时，怎样限制上传图片的尺寸？就是在图片上传之前，用javascript报错？

解析:

<script>

var img=null

var xianzhiheight=60限制尺寸的高度

var xianzhiwidth=80限制尺寸的宽度

function yanzheng()

{

if(img)img.removeNode(true)

img=document.createElement("img")

img.style.position="absolute"

img.style.visibility="hidden"

document.body.insertAdjacentElement("beforeend",img)

img.src=form1.file.value

if (img.offsetHeight>xianzhiheight)

{

alert("您选择的图片超过了上传限制的最大高度："+xianzhiheight)

document.form1.file.outerHTML=document.form1.file.outerHTML.replace(/value=\w/g,'')

return false

}

if (img.offsetWidth>xianzhiwidth){

alert("您选择的图片超过了上传限制的最大宽度："+xianzhiwidth)

document.form1.file.outerHTML=document.form1.file.outerHTML.replace(/value=\w/g,'')

return false

}

}

</script>

<form id="form1" name=form1 method="post" action="">

<input type=file Name="file" id="file" value="默认值" onchange="yanzheng()">

<input type=submit name=Submit value="提交" />

</form>

如果说一定要是html限制上传大小，那么只能是<input type='hidden' name='MAX_FILE_SIZE' value='1024'>这个代码控制最大上传限制了，

我们设计的上传文件大约在500m左右

我第一反应是blob，在HTML5中添加了blob类型用来定义前端较大数据，之前使用过blob流传输视频再使用html5中<video>标签读取blob流，所以blob可以作为这种文件传输的载体，那如何提交呢，使用可formdata提交blob数据，这种方式可以承受较大数据量的文件，但在使用formdata传输的过程中，浏览器会卡死，无法 *** 作。

还是舍友提醒，可采用数据分割的方式，一部分一部分上传。后经百度得知，文件分割要防止数据丢失进行大小校验，以及防止外部入侵，进行分段前端加密，后端校验。

百度发布了一款分割上传的组件web upload，可包含文件分割，大小校验等功能。

网站为： http://fex.baidu.com/webuploader/getting-started.html

佩服我们大学宿舍的技术氛围，出差回来的火车上跟大学舍友在微信上聊了两三个小时的技术，，，那天刚好是大学生开学那几天，路上好多大学生，好怀念自己的大学生活，好怀念与大学舍友谈天说地或技术探讨到深夜的日子

说了几个前端的问题，总结记录一下吧

其中只有一个我会的，，，先说这个问题，其他的我学习完再分享，留坑。。。。。。

---