創杰網絡找了一個簡單的JS上傳圖片前的限制包括(jpg jpg gif及大小高寬)的代碼：
功能：
1.限制擴展名：只能jpg和gif
2.限制圖片大小：K為單位
3.限制圖片寬高：px為單位
4.限制已經損壞的圖片
5.限制更改過擴展名的圖片（比如強制把一個動態的GIF擴展名改為JPG了）
使用限制：
要在InputFile里增加onchange事件，使其選擇文件后能在一個img標簽里加載出來，否則使用會出錯
var img=document.getElementById(arguments[0]);//顯示圖片對象
var maxSize=arguments[1];//
var allowGIF=arguments[2]||false;
var maxWidth=arguments[3]||0;
var maxHeight=arguments[4]||0;
var postfix=getPostfix(img.src);
var str=".jpg";
if(allowGIF){str+=".gif"}
if(str.indexOf(postfix.toLowerCase())==-1){
if(allowGIF){return "圖片格式錯誤，只能上傳jpg或gif圖像";}else{return "圖片格式錯誤，只能上傳jpg圖像";}
}else if(img.fileSize>maxSize*1024){
return "圖片大小不符合,請限制在"+maxSize+"K以內";
}else{
if(img.fileSize==-1){
return "圖片格式錯誤，可能是已經損壞或者更改擴展名導致，請重新選擇一張圖片";
}else{
if(maxWidth>0){
if(img.width>maxWidth){
return "圖片寬度超過限制，請保持在"+maxWidth+"像素內";
}else{
if(img.height>maxHeight){
return "圖片高度超過限制，請保持在"+maxHeight+"像素內";
}else{
return "";
}
}
}else{
return "";
}
}
}
}
//根據路徑獲取文件擴展名
function getPostfix(path){
return path.substring(path.lastIndexOf("."),path.length);
<body>
<input type="file" onchange="document.getElementById('img1').src=this.value;" />
<img id="img1" />
<input type="button" onclick="aa()" value="上傳" />
</body>
<mce:script type="text/javascript"><!--
function aa(){
if(limitImg('img1',100,false,1000,100)==""){
alert("圖片上傳成功");
}else{
alert(limitImg('img1',100,false,1000,100));
}
}
// --></mce:script>
功能：
1.限制擴展名：只能jpg和gif
2.限制圖片大小：K為單位
3.限制圖片寬高：px為單位
4.限制已經損壞的圖片
5.限制更改過擴展名的圖片（比如強制把一個動態的GIF擴展名改為JPG了）
使用限制：
要在InputFile里增加onchange事件，使其選擇文件后能在一個img標簽里加載出來，否則使用會出錯
imglimit.js
function limitImg(){var img=document.getElementById(arguments[0]);//顯示圖片對象
var maxSize=arguments[1];//
var allowGIF=arguments[2]||false;
var maxWidth=arguments[3]||0;
var maxHeight=arguments[4]||0;
var postfix=getPostfix(img.src);
var str=".jpg";
if(allowGIF){str+=".gif"}
if(str.indexOf(postfix.toLowerCase())==-1){
if(allowGIF){return "圖片格式錯誤，只能上傳jpg或gif圖像";}else{return "圖片格式錯誤，只能上傳jpg圖像";}
}else if(img.fileSize>maxSize*1024){
return "圖片大小不符合,請限制在"+maxSize+"K以內";
}else{
if(img.fileSize==-1){
return "圖片格式錯誤，可能是已經損壞或者更改擴展名導致，請重新選擇一張圖片";
}else{
if(maxWidth>0){
if(img.width>maxWidth){
return "圖片寬度超過限制，請保持在"+maxWidth+"像素內";
}else{
if(img.height>maxHeight){
return "圖片高度超過限制，請保持在"+maxHeight+"像素內";
}else{
return "";
}
}
}else{
return "";
}
}
}
}
//根據路徑獲取文件擴展名
function getPostfix(path){
return path.substring(path.lastIndexOf("."),path.length);
}
<body>
<input type="file" onchange="document.getElementById('img1').src=this.value;" />
<img id="img1" />
<input type="button" onclick="aa()" value="上傳" />
</body>
<mce:script type="text/javascript"><!--
function aa(){
if(limitImg('img1',100,false,1000,100)==""){
alert("圖片上傳成功");
}else{
alert(limitImg('img1',100,false,1000,100));
}
}
// --></mce:script>
從中我們可以找到這樣一段if(img.fileSize>maxSize*1024)
這里就是對上傳圖片進行的大小判斷。
按照創杰網絡的思路我們在處理在JS里面的上傳限制的時候可以通過搜索.fileSize這樣的關鍵詞來找到我們的大小修改地方了，大家都學會了嗎！
