图片上传之前检查大小、尺寸、格式并预览

javatoyou

浏览: 1017890 次
性别:
来自: 北京

最近访客更多访客>>

altdon

gaojingsong

u012363178

wahahachuang8

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2015)

社区版块

存档分类

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>validatebeforeuploadbyLanceZhang</title>

</head>

<bodystyle="font-family:Calibri">

<formname="Myform">

<p>

<fontcolor="red"size="6">Filetype:gif,jpg,jpeg,png,bmp</font></p>

<p>
FileSizelimit:

<inputtype="text"size="4"value="100"name="fileSizeLimit"id="fileSizeLimit"/>

K</p>

<p>

ImageHeightLimit:<inputtype="text"size="4"value="100"name="heightLimit"id="heightLimit"/>

</p>

<p>

ImageWidthLimit:<inputtype="text"size="4"value="100"name="widthLimit"id="widthLimit"/>

</p>

<p>

<inputtype="file"name="photo"onchange="changeSrc(this)"/>

ImagePreview<imgsrc="about:blank"id="fileChecker"name="fileChecker"alt="test"/>

</p>

<p>

<inputtype="submit"value="submit">

</p>

</form>

<scripttype="text/javascript">
functionCheckFileSize()
{

varlimit=document.getElementById("fileSizeLimit").value*1024;

varwidth=document.getElementById("widthLimit").value;

varheight=document.getElementById("heightLimit").value;

if(oFileChecker.fileSize>limit)
{
alert("FileSize:"+oFileChecker.fileSize+"byte--toolarge!");
}
else
{
alert("FileSize:"+oFileChecker.fileSize+"byte--ok");
}

if(oFileChecker.height>height)
{
alert("ImageHeight:"+oFileChecker.height+"--tooheight!");
}
else
{
alert("ImageHeight:"+oFileChecker.height+"--ok");
}

if(oFileChecker.width>width)
{
alert("ImageWidth:"+oFileChecker.width+"--toowidth!");
}
else
{
alert("ImageWidth:"+oFileChecker.width+"--ok");
}
returnfalse;
}

varright_type=newArray(".gif",".jpg",".jpeg",".png",".bmp");

varoFileChecker=document.getElementById("fileChecker");
functionchangeSrc(filePicker)
{
if(!checkImgType(filePicker.value))
{
alert("thefiletypeisnotcorrect");
return;
}

oFileChecker.src=filePicker.value;
}

oFileChecker.onreadystatechange=function()
{

if(oFileChecker.readyState=="complete")
{
CheckFileSize();
}
}
functioncheckImgType(fileURL)
{

varright_typeright_typeLen=right_type.length;

varimgUrl=fileURL.toLowerCase();

varpostfixLen=imgUrl.length;

varlen4=imgUrl.substring(postfixLen-4,postfixLen);

varlen5=imgUrl.substring(postfixLen-5,postfixLen);

for(i=0;i<right_typeLen;i++)
{

if((len4==right_type[i])||(len5==right_type[i]))
{
returntrue;
}
}
}

</script>

</body>

</html>